焦点

Question

我正在尝试在span内设置一个文本，该文本位于焦点上的锚标记内。

在焦点上，文字应该会收到underline。重点需要通过标签来实现。

但它不起作用。

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Fiddle

Answer 1

使用:focus中的a代替

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;