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