帶li標簽的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;
    }

這不起作用，如果使第一個li標記類不是“ bla”，而是“ my_li”，那么li元素設置為綠色。 有人告訴我，為什么會這樣。

Answer 1

屬於類“ my_li”的第一個元素是其父級的第二個子級。

:first-child選擇作為其父級的第一個孩子的元素。

Answer 2

您應該使用此選擇器：

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

（如果我當前正在理解您的問題，並且您希望第二個<li>具有這種樣式）

Answer 3

這是行不通的，因為選擇器意味着您正在選擇類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 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)選擇器解決您的問題，但這意味着您需要確切地知道li元素在其父ul （在本例中為第二個孩子）中的順序，如果您插入更多元素，這將失敗。

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