html - CSS 子选择器 (>) 不适用于某些属性

Question

当我尝试使用“>”选择父元素的所有直接子元素时，它适用于一些属性，如边框和所有，但不适用于字体属性，如颜色、字体粗细等。

我的 HTML 是

<ul>
  <li>Item 1</li>
  <li>
    <ol>
      <li>Subitem 2A</li>
      <li>Subitem 2B</li>
    </ol>
  </li>
</ul>

CASE1 CSS:

ul>li {
    color:#F00;
}

但是这里 color:#F00 属性应用于所有“li”元素，但我希望它只应用于“ul”的直接“li”。

案例 2 CSS:

ul>li {
  border: solid 1px #000;
}

这个对我来说效果很好，边框只应用于直接的 li child 。

我知道它可以通过覆盖其他一些类和所有类来解决。但我想知道，为什么有些 css 属性会被继承而有些则不会。

Answer 1

这是由于某些 CSS 属性的默认继承能力而发生的。默认情况下，此类属性的值将传输给子项。

这份来自 W3C 的文档给出了各种 CSS 属性继承的详细列表。 Full property table