试图理解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

在ul选择匹配<ul>您的代码的第1行,并在<ul>你的代码的第5行.

你需要更具体的东西才能ul匹配第1行的那个(例如:not(li) > ul > li)......但即使这样,color属性的默认值inherit也不是black,所以即使选择器不能,也会从父元素中复制颜色. t导致规则匹配它.

所以你需要显式设置嵌套元素的颜色:

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