CSS子选择器（＆gt;）无法使用某些属性

Question

当我尝试使用“＆gt;”选择父元素的所有直接子元素时，它可以使用一些属性，如border和all，但不能使用颜色，字体粗细等字体属性。

我的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;
}

但是这里的颜色：＃F00属性应用于所有“li”元素，但我希望它仅适用于“ul”的直接“li”。

案例2 CSS：

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

这个适用于我，边框仅适用于直接李子。

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

Answer 1

由于某些CSS属性的默认继承功能而发生这种情况。默认情况下，这些属性的值将传输给孩子。

W3C的这个文档提供了各种CSS属性的详细继承列表。 Full property table

Answer 2

试试这个

Demo

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

Answer 3

试试这个

ul > li ol li {color:black;}

Answer 4

由于list元素已从其父元素继承color属性，因此需要覆盖它。

您可以在此之前添加以下样式，如

li { 
    color: #000; 
}

ul>li { 
    color:#F00;
}

它会覆盖颜色：继承值。

Answer 5

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

您应该可以使用

选择这些元素

ul:first-child {

// css

}

希望这有帮助