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解决方案。如果您只想格式化嵌套在具有任意嵌套级别的任意标记（具有id featured）内的第一个锚标记，那么我更喜欢jQuery：

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

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

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

然而，当列表样式是你唯一的任务时，我会推荐CSS解决方案。

css3第一个孩子在列表项的锚点

3 个答案: