为什么带有> sign(direct child)的CSS选择器会覆盖默认样式？

Question

有人可以向我解释为什么CSS > sign(direct child)会覆盖<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前景色:color属性
• 6.2.1 inherit价值

Answer 2

color对于大多数元素,属性的默认值inherit不是black.这意味着它接受parent(ol)元素具有的任何值.(那是在ol继承红色之后li).

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

ul > li li {
   color: black;
}

要么

ol > li {
   color: black;
}