html - 试图理解 CSS 中的子组合子

Question

我只想为 的第一级设置样式li，它看起来像一个子组合器应该可以工作，但正如下面的演示所示，每个li都是红色的。我希望只有第一级（不是嵌套的）li被设置为红色。

我究竟做错了什么？

.list > li {
  color: red;
  border: 1px solid orange;
  list-style: none;
}

<ul class="list">
  <li>1st level</li>
  <li>1st level</li>
  <li>1st level
      <ul>
          <li>2nd level</li>
          <li>2nd level</li>
          <li>2nd level</li>
          <li>2nd level</li>
          <li>2nd level</li>
      </ul>
  </li>
  <li>1st level</li>
  <li>1st level</li>
</ul>

标签： htmlcss

Answer 1

选择ul器匹配代码的<ul>第 1 行和代码的第<ul>5 行。

您需要更具体的内容才能ul仅匹配第 1 行（例如:not(li) > ul > li）上的那个……但即便如此，该color属性的默认值inherit不是black，因此即使选择器不会，仍会从父元素复制颜色t 导致规则匹配它。

所以你需要明确设置嵌套元素的颜色：

ul > li { color: red; }
ul > li li { color: black; }