CSS “第一子” 与李标签

Question

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

这不工作，如果做的第一李标签种类不是 “喇嘛”，而是 “my_li”，alreday li元素设置绿色颜色。有人告诉，为什么发生这种情况。

Answer 1

作为类“my_li”成员的第一个元素是其父类的第二个子元素。

:first-child选择父母的第一个孩子的元素。

Answer 2

它不起作用，因为该选择器意味着你选择了一个类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。

http://www.w3schools.com/cssref/sel_firstchild.asp

Answer 3

你应该使用这个选择：

.my_li:nth-child(2) { ... } 

（如果我目前了解你的问题，你想第二<李>有这种风格）

Answer 4

如果您不想更改第一个元素的类，请使用：

ul li:first-child{ 
      color: #090; 
    } 

Answer 5

由于Quentin表示，:first-child表示它的父项的第一个元素。

如果你想针对你的例子列表的第一个元素，这样做：

ul li:first-child { 
    color: #090; 
} 

Answer 6

我认为最好的办法是到第二类添加到您的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)选择器解决你的问题，但这意味着你需要知道确切的顺序是其父母ul（在本例中是第二个孩子）中的元素，如果插入更多元素，则将失败。

css: .my_li:nth-child(2){ color: #090;}