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

Posted 2021-04-18

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

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

答案

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

你可能想要的是：

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

另一答案

因为所有的锚都是他们父母的第一个孩子。你需要：

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

另一答案

如果你总是有一个列表我更喜欢像@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解决方案。