html - 带有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;}