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

Question

当我尝试使用“">”将某些 CSS 属性应用于父元素的直接子元素时，它与某些属性（如边框）配合得很好，但不适用于字体属性（如颜色、字体粗细等）。

我的 HTML 是

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

案例1CSS：

ul>li {
    color:#F00;
}

使用上面的 CSS 代码，

color: #F00

属性将应用于父级及其子级下的所有

li

元素。预期的是，它应该只应用于直系孩子

li

s。

案例2 CSS：

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

上面的代码按预期工作，并且边框仅应用于直接

li

子级。

我知道这可以通过用另一个类覆盖它来解决。但想知道为什么其中一些 CSS 属性会继承到层次结构的所有级别，而其他属性则不会继承。

Answer 1

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

W3C 的这份文档给出了各种 CSS 属性继承的详细列表。 完整属性表

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

Answer 3

试试这个

ul > li ol li {color:black;}

Answer 4

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

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

li { 
    color: #000; 
}

ul>li { 
    color:#F00;
}

它覆盖颜色：继承值。

Answer 5

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

您应该能够使用

选择这些元素

ul:first-child {

// css

}

希望这有帮助