html - 列表项锚点中的css3第一个孩子

Question

<style type="text/css">
#featured a:first-child
{
 background-color:yellow;
}
</style>

<div id="featured">
   <ul class="ui-tabs-nav">
     <li><a href="#"><span>test 1</span></a></li>
     <li><a href="#"><span>test 2</span></a></li>
     <li><a href="#"><span>test 3</span></a></li>
     <li><a href="#"><span>test 4</span></a></li>
   </ul>
</div>

我想突出显示列表中的第一个锚点，但不幸的是所有锚点都被突出显示。这里有什么错误。

Answer 1

它们都被突出显示，因为每个a都是其父级的第一个孩子li

你可能想要的是这样的：

#featured li:first-child a
{
 background-color:yellow;
}

Answer 2

因为所有的主播都是父母的第一个孩子。你需要：

#featured li:first-child a {
    background-color: yellow;
}

Answer 3

如果你总是有一个列表，我会更喜欢 @powerbuoy 和 @danwellman 之类的 CSS 解决方案。如果您只想格式化嵌套在featured具有任意嵌套级别的任意标签（带有 id ）内的第一个锚标签，那么我更喜欢 jQuery：

$('#featured a').first().css('background-color', 'yellow');

使用 div 而不是无序列表的示例：http: //jsfiddle.net/9vAZJ/
格式化列表的相同 jQuery 代码（如问题中所示）：http: //jsfiddle.net/9vAZJ/1/

jQuery 代码是一个更通用的解决方案，更适合您最初尝试格式化问题中的锚标记，因为这两种解决方案都与列表标记分离。

尽管如此，当列表样式是您唯一的任务时，我会推荐 CSS 解决方案。