第一个孩子和列表中的列表

stulk 发表于 Dev

stulk

我正在尝试为父列表中的第一个孩子设置样式：

ol:first-child > li {
  color: red;
}

<ol>
  <li>Numbered list item 1</li>
  <li>Numbered list item 2
    <ol>
      <li>sublist item 1</li>
      <li>sublist item 2</li>
    </ol>
  </li>
  <li>Numbered list item 3</li>
</ol>

https://jsfiddle.net/cvuw2bd1/1/

不是子列表。但是，如果我在启动子列表之前关闭了第二个列表项，那么它将起作用。

<li>Numbered list item 2</li>
<ol>...

如下所示：

ol:first-child > li {
  color: red;
}

<ol>
  <li>Numbered list item 1</li>
  <li>Numbered list item 2</li>
  <ol>
    <li>sublist item 1</li>
    <li>sublist item 2</li>
  </ol>
  <li>Numbered list item 3</li>
</ol>

https://jsfiddle.net/cvuw2bd1/

不幸的是，我不能仅更改CSS的HTML。有没有办法解决这个问题，以便在第一个示例中排除子列表。（我无法添加任何类或ID。）

迈克尔·本杰明

在ol你与目标ol:first-child > li是在HTML结构中的第一个，最后一个和唯一的孩子。它没有兄弟姐妹。嵌套也是如此ol。

该ol元件具有垂直（祖先子孙），而不是横向（兄弟姐妹），关系。

因此，请勿使用nth-child伪类。使用后代组合器。

li {
  color: red;
}

li li {
  color: black;
}

<ol>
  <li>Numbered list item 1</li>
  <li>Numbered list item 2
    <ol>
      <li>sublist item 1</li>
      <li>sublist item 2</li>
    </ol>
  </li>
  <li>Numbered list item 3</li>
</ol>

另外，在处理color属性时，熟悉继承的概念也很重要。这是一个解释：