html - 第一个 child 和列表中的列表

Question

我正在尝试为父列表中的第一个 child 设置样式:

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/

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

Answer 1

您使用 ol:first-child > li 定位的 ol 是 HTML 结构中的第一个、最后一个和唯一的 child 。它没有 sibling 。嵌套的 ol 也是如此。

ol 元素具有垂直(祖先-后代)关系，而不是横向(兄弟)关系。

所以不要使用nth-child伪类。使用 descendant combinators .

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 属性时，熟悉继承 的概念也很重要。这是一个解释:

• CSS :not pseudo-class not working