html - 列表项 anchor 中的 css3 第一个 child

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>

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

Answer 1

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

你可能想要的是这样的:

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