CSS子选择器（>）与某些属性不起作用

Question

当我试图使用“>”来选择父元素的所有直接子元素时，对于一些属性如边框等，它可以工作，但是对于像颜色、字体粗细等字体属性则无法正常工作。

我的HTML代码是：

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

案例1 CSS：

ul>li {
    color:#F00;
}

但是这里的color:#F00属性会应用于所有的"li"元素，但我只希望它应用于直接属于"ul"的"li"元素。 情况2 CSS:

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

这个对我很有效，边框仅应用于直接的li子元素。

我知道可以通过使用其他类进行覆盖来解决此问题。但我想知道为什么某些CSS属性会继承，而其他属性则不会继承。

- Prasanth K C

---

你指的是直接“li”吗？ - A.Mokhtari

"ol"元素的"li"子元素从祖先"li"元素那里继承了颜色。 - Musa

正如所指出的那样，颜色值被继承到内部的 li 中，因此您必须手动使用下面的另一个规则来覆盖它。 - omma2289

在 W3 中查看 CSS 属性的完整列表，其中指定了默认继承哪些属性。 - omma2289

@Musa，谢谢，但为什么只有某些属性如颜色和字体粗细会被继承，而其他属性不会呢？（你能否请看一下我编辑后的问题） - Prasanth K C

Answer 1

由于某些CSS属性的默认继承能力，这种情况正在发生。这种属性的值将默认传递给子元素。

W3C的这篇文档详细列出了各种CSS属性中的继承。完整的属性表请参考此处。

- Prasanth K C

---

@BoltClock的回答是关于如何覆盖条件的，我已经知道了。但我寻求的是这种现象背后的原因。 - Prasanth K C

Answer 2

尝试这个

演示

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

CSS

ul > li {
    color:#F00;
}
ul > li > ol > li {
    color:#000;
}

- sangram parmar

Answer 3

试一下这个

ul > li ol li {color:black;}

- Hushme

Answer 4

由于列表元素已经从其父元素继承了颜色属性，因此您需要覆盖它。

您可以在自己的样式之前添加以下样式，如下所示

li { 
    color: #000; 
}

ul>li { 
    color:#F00;
}

它覆盖了color: inherit的值。

- Ashis Kumar

Answer 5

我认为你可能会在这里找到你需要的答案：http://www.w3schools.com/cssref/sel_firstchild.asp

你应该能够使用以下方法选择这些元素：

ul:first-child {

// css

}

希望这有所帮助

- Bryce