Question

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

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

ol元素具有垂直（祖先 - 后裔），而不是横向（兄弟）关系。

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

＆＃13;

li {
  color: red;
}

li li {
  color: black;
}

＆＃13;

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

＆＃13;

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

CSS :not pseudo-class not working

Answer 2

您需要通过添加另一个来覆盖您的规则。这里的问题是，即使您没有选择内部li，他们继承应用于其父元素的样式。

＆＃13;

ol> li {
  color: red;
}
ol  ol >li {
  color: initial;
}

＆＃13;

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

＆＃13;

Answer 3

如果您无法更改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

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

3 个答案: