时间戳

首页 > 解决方案 > CSS 精确子选择器

css - CSS 精确子选择器

问题描述

我知道大于（>）符号/选择器将选择确切的孩子而不是嵌套的

但在这个例子中，所有<li>的 BG 都变黑了

<div id="content">
  <ul>
    <li>List Item With ul
        <ul>
            <li>Sub list item</li>
            <li>Sub list item</li>
            <li>Sub list item</li>
        </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
</div>

CSS：

#content > ul li {
   background: black;
   color: white;
}

根据规则黑色 BG 不应该用于 子列表项，但在这里它适用于所有<li>（应该只用于List Item With）

http://jsfiddle.net/4j1zv25b/

标签： css

解决方案

您当前的代码选择li第一级中的任何一个ul。子列表li标签仍然是第一个标签的后代，ul所以要设置样式。您还需要使用 select 的直接后代ul：

#content > ul > li {
   background: black;
   color: white;
}

但是，您还有一个问题，即所有子列表都在该 styledli中。子元素没有设置背景或颜色，因此背景是透明的并且颜色是继承的。您需要应用新的背景和颜色来覆盖这些样式。

#content>ul>li {
  background: black;
  color: white;
}

#content li li {
  background: white;
  color: black;
}
<div id="content">
  <ul>
    <li>List Item With ul
      <ul>
        <li>Sub list item</li>
        <li>Sub list item</li>
        <li>Sub list item</li>
      </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
</div>

推荐阅读