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

【问题标题】：first-child and a list within a list第一个孩子和列表中的列表
【发布时间】：2018-05-23 18:59:24
【问题描述】：

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

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 > li:first-child然后重置ol ol > li:first-child怎么样？
applying css for only parent but not to children的可能重复
@lumio 它不是重复的，因为它是关于继承的......实际上他只选择了需要的元素
即使您可以更改 html，您拥有的第二个示例 html 也是无效的 html
您能否澄清一下：您是在尝试选择“第一个孩子 in 父列表”（如问题所述）还是是其父级中的第一个子级（正如代码，包括“工作”示例所暗示的那样）？

标签： html css css-selectors

【解决方案1】：

您使用ol:first-child > li 定位的ol 是HTML 结构中的第一个、最后一个也是唯一的子级。它没有兄弟姐妹。嵌套的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

【讨论】：

【解决方案2】：

如果不能更改html，可以对li的子元素应用样式

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

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

最后但并非最不重要...如果它不起作用，请使用important

【讨论】：