为什么CSS选择器带＆gt; sign（直接子）覆盖默认样式？

Question

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

＆＃13;

＆＃13;

ul > li {
  color:red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

预期结果：

实际结果：

我知道我可以通过添加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

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

您必须设置显式颜色才能覆盖它。例如：

ul > li li {
   color: black;
}

或

ol > li {
   color: black;
}

Answer 3

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