3

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

我的 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 属性会被继承，而另一些则不会。

4

5 回答 5

6

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

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

于 2013-07-30T07:21:34.533 回答
0

尝试这个

演示

<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;
}
于 2013-07-27T04:53:54.590 回答
0

尝试这个

ul > li ol li {color:black;}
于 2013-07-27T04:54:26.300 回答
0

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

您可以在您的之前添加以下样式

li { 
    color: #000; 
}

ul>li { 
    color:#F00;
}

它覆盖颜色：继承值。

于 2013-07-27T05:33:32.430 回答
-2

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

您应该能够选择这些元素

ul:first-child {

// css

}

希望这可以帮助

于 2013-07-27T04:54:18.747 回答