试图了解CSS中的Child组合器

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>

Answer 1

SELECT cast(dateadd(dd, number, dateadd(MM, -3, dateadd(dd, -day(getdate())+1, getdate()))) as date) FROM master..spt_values m1 WHERE type = 'P' AND dateadd(dd, number, dateadd(MM, -3, dateadd(dd, -day(getdate())+1, getdate()))) <= dateadd(MM, 1, dateadd(dd, -day(getdate()) , getdate())) 选择器与代码第1行的ul和代码第5行的<ul>匹配。

您需要更具体的内容来使<ul>仅与第1行上的匹配（例如ul）…但是，即使如此，:not(li) > ul > li属性的默认值为{ {1}}而非color，因此即使选择器不会导致规则与之匹配，该颜色仍会从父元素中复制出来。

因此，您需要显式设置嵌套元素的颜色：

inherit

Answer 2

您的选择器将设置“是<li>元素的直接子元素的任何<ul>元素” 的样式，对于 all 您的<li>元素。

您可以通过执行<ul>并将其重新设置为黑色来覆盖所有内部ul ul > li元素。

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

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

Answer 3

#outer-list > li {
  color: red;
}
#inner-list > li {
  color: black;
}

<ul id="outer-list">
  <li>1st level</li>
  <li>1st level</li>
  <li>1st level
      <ul id="inner-list">
          <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>