<ul>
<li class="bla">aaa</li>
<li class="my_li">sss</li>
<li class="my_li">ddd</li>
<li class="my_li">fff</li>
</ul>
的CSS:
.my_li:first-child{
color: #090;
}
这不起作用,如果第一个li标签类不是“bla”,而是“my_li”,alreday li元素设置绿色。有人告诉我,为什么会这样。
答案 0 :(得分:6)
作为“my_li”类成员的第一个元素是其父级的第二个子元素。
:first-child
选择父母的第一个子元素。
答案 1 :(得分:2)
您应该使用此选择器:
.my_li:nth-child(2) { ... }
(如果我现在理解你的问题,你希望第二个&lt; li&gt;有这种风格)
答案 2 :(得分:1)
它不起作用,因为该选择器意味着你选择了一个类my_li的元素,它是其父级的第一个子元素,在你的html中不存在。
尝试
<ul>
<li class="my_li">aaa</li>
<li class="my_li">sss</li>
<li class="my_li">ddd</li>
<li class="my_li">fff</li>
</ul>
然后你的规则将适用于aaa。
答案 3 :(得分:1)
如果您不想更改第一个元素的类,请使用:
ul li:first-child{
color: #090;
}
答案 4 :(得分:1)
正如{{3rd}}所说,:first-child
指的是其父级的第一个元素。
如果要定位示例列表的第一个元素,请执行以下操作:
ul li:first-child {
color: #090;
}
答案 5 :(得分:1)
我认为最好的解决方案是在您的li
元素
CSS:
.first_li{ color:#090; }
<ul>
<li class="bla">aaa</li>
<li class="my_li first_li">sss</li>
<li class="my_li">ddd</li>
<li class="my_li">fff</li>
</ul>
您可以使用:nth-child(n)
选择器解决您的问题,但这意味着您需要准确了解其父li
内的ul
元素的顺序(在这种情况下是第二个孩子) )如果你插入更多的元素,这将失败。
css: .my_li:nth-child(2){ color: #090;}