聚焦的錨定標記內的跨度樣式

Question

我試圖在聚焦的錨定標記內的span內部創建樣式。

重點文本應該收到underline。重點需要通過製表來實現。

但它不工作。

可能有人請大家看看，讓我知道我是什麼失蹤

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

使用:focus在a代替

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>

Answer 2

span元素不能集中（除非他們有在tabIndex屬性）。放置：重點選擇的錨，而不是：

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>