为什么带有 > 符号（直接子代）的 CSS 选择器会覆盖默认样式？

Question

有人可以向我解释为什么 CSS > 符号（直接子代）会覆盖此示例中所有 <li> 标记的默认颜色：

ul > li {
  color:red;
}

<ul>
  <li>This should be red
    <ol>
      <li>default color 1</li>
      <li>default color 2</li>
    </ol>
  </li>
  <li>And this should be red also
    <ol>
      <li>default color 3</li>
      <li>default color 4</li>
    </ol>
  </li>
</ul> 

预期结果：

实际结果：

我知道我可以通过添加li { color: black; } 来修复它，但我想知道为什么ul > li 会覆盖<li> 的默认颜色？

Answer 1

问题不在于子组合子 (>)，而在于 color 属性，它是可继承的。

虽然color属性的初始值因浏览器而异，但inherit很常见。这意味着元素的文本颜色是从父级继承的。您在代码中看到了这一点。

相比之下，border 属性不可继承。请注意，与文本颜色不同，它仅适用于您的目标li：

ul > li {
  color: red;
  border: 1px solid black;
}

li { border: 1px solid inherit !important; }

<ul>
  <li>This should be red
    <ol>
      <li>default color 1</li>
      <li>default color 2</li>
    </ol>
  </li>
  <li>And this should be red also
    <ol>
      <li>default color 3</li>
      <li>default color 4</li>
    </ol>
  </li>
</ul>

要实现样式目标，请为 li 元素设置默认颜色。这将覆盖inherit。这是一个例子：

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

<ul>
  <li>This should be red
    <ol>
      <li>default color 1</li>
      <li>default color 2</li>
    </ol>
  </li>
  <li>And this should be red also
    <ol>
      <li>default color 3</li>
      <li>default color 4</li>
    </ol>
  </li>
</ul>

参考资料：

• 14.1 Foreground color: the color property
• 6.2.1 The inherit value

Answer 2

ol 正在继承样式。您需要为内部列表指定样式。

Answer 3

对于大多数元素，color 属性的默认值为inherit，而不是black。这意味着它采用父 (ol) 元素具有的任何值。 （这是在ol 继承自红色li 之后）。

您必须设置一个明确的颜色来覆盖它。例如：

ul > li li {
   color: black;
}

或

ol > li {
   color: black;
}