Focus 上锚标记内 span 的样式

Question

我正在尝试为 span 中的文本设置样式，该文本位于焦点上的锚标记内。

在焦点上文本应该收到 underline。焦点需要通过tab键实现。

但是它不起作用。

有人可以看一下，让我知道缺少什么吗

body > div.afterLink > a > span:focus {
  border-bottom: 2px solid green;
}

<div class="beforeLink">
  <span tabIndex=-1>Go to Google</span>
</div>
<div class="titleLink">
  <a class="download" target="_blank" href="www.google.com" title="Click here">
    <span>Go to Google</span>
  </a>
</div>
<div class="afterLink">
  <a class="download" target="_blank" href="www.google.com" title="Click here">
    <span>Go to Google</span>
  </a>
</div>

Fiddle

Answer 1

Span 元素无法聚焦（除非它们具有 tabindex 属性）。将 :focus 选择器放在锚点上：

body > div.afterLink > a:focus > span {
  border-bottom: 2px solid green;
}

<div class="beforeLink">
  <span tabIndex=-1>Go to Google</span>
</div>
<div class="titleLink">
  <a class="download" target="_blank" href="www.google.com" title="Click here">
    <span>Go to Google</span>
  </a>
</div>
<div class="afterLink">
  <a class="download" target="_blank" href="www.google.com" title="Click here">
    <span>Go to Google</span>
  </a>
</div>

Answer 2

在a中改用:focus

div.afterLink > a:focus > span {
  border-bottom: 10px solid green
}

<div class="beforeLink">
  <span tabIndex=-1>Go to Google</span>
</div>
<div class="titleLink">
  <a class="download" target="_blank" href="www.google.com" title="Click here">
    <span>Go to Google</span>
  </a>
</div>
<div class="afterLink">
  <a class="download" target="_blank" href="www.google.com" title="Click here">
    <span>Go to Google</span>
  </a>
</div>

Focus 上锚标记内 span 的样式

styling for span inside anchor tag on Focus

html

css

pseudo-class