[英]css “first-child” with li tag
<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”,那么li元素设置为绿色。 有人告诉我,为什么会这样。
属于类“ my_li”的第一个元素是其父级的第二个子级。
:first-child
选择作为其父级的第一个孩子的元素。
您应该使用此选择器:
.my_li:nth-child(2) { ... }
(如果我当前正在理解您的问题,并且您希望第二个<li>具有这种样式)
这是行不通的,因为选择器意味着您正在选择类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。
如果您不想更改第一个元素的类,请使用:
ul li:first-child{
color: #090;
}
我认为最好的解决方案是在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;}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.