Question

我知道大于（>）的符号/斜线符会选择确切的子级，而不是嵌套一个子级

但在此示例中，所有<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>（应仅用于列表项）

http://jsfiddle.net/4j1zv25b/

Answer 1

您当前的代码选择第一级li中的任何ul。子列表li标记仍然是第一个ul的后代，因此需要样式化。您还需要使用选择ul的直接后代：

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

但是，还存在所有子列表都位于样式li内的问题。子元素没有设置背景或颜色，因此背景是透明的并且颜色是继承的。您需要应用新的背景和颜色以覆盖这些样式。

#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>

Answer 2

您描述的行为是正确的，因为您要求#content的直接ul子将这种行为定性为Li。

仅仅因为您已经给Li带来了一些孩子，并不会否定它的作用。因为孩子在最初针对的Li的范围内，所以将根据父母的样式进行设置。

我附上了您可能正在寻找的潜在变体，该变体应仅位于子类别中的第一个li。

我还附加了另一个示例，它可能会更好地说明我的观点。想象一个Div，其中有另一个Div，在子div内，有一个段落标记。

如果您为第一个div的直接子元素设置样式，则您希望段落标记仍具有黑色背景，因为它的父级是目标div。 p不会应用相反的样式进行补偿，因为为什么会这样？

#content>ul li {
  background: black;
  color: white;
}

#desired>ul li ul li:first-child {
  background: black;
  color: white;
}

#example > div {
background: black;
color: white;
}

<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>

<div id="desired">
  <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>

<div id="example">
  <div>
    <p>Still styled</p>
  </div>
</div>

Answer 3

大于符号（>）选择父级的直接子级，但孙级子代仍将从其继承。

要选择孩子，您需要ul li ul li或ul > li > ul > li

您还可以使用子选择器，例如：

:first-child
:nth-child(n)
:last-child

在https://www.w3schools.com/cssref/css_selectors.asp

上了解有关CSS选择器的更多信息

Answer 4

为什么您还不选择内部列表项

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


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

CSS精确子选择器

4 个答案: