Question

子选择器应选择元素包含的直接子代。但是在以下代码中，选择器div > ul > li选择<li>的所有后代<div>。我不知道为什么子选择器会扩大其范围？

div>ul>li {
  text-decoration: underline;
  color: blue;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3
      <ul>
        <li>Item 31</li>
        <li>Item 32</li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

如果您查看Chrome或Firefox开发人员工具中的页面，就会看到发生了什么。选择器不适用于其他后代，而是从其父级继承color。

默认情况下，未设置color属性。这等效于设置color: inherit;，换句话说，这意味着“由于我没有特殊说明，因此我会做我父母所做的一切”。因此，当您为元素设置颜色时，它也会也应用于该元素的所有后代，除非它们中的任何一个指定了自己的color。

Answer 2

@Draconis的答案是一个良好的开端，但评论表明，对下划线没有任何解决方案。所以这是一个解决方案。

/* Set all list elements to a default value. change this to what you need it to be */
li {
  color: black;
  text-decoration: none;
}
/* Then set the inner ULs to full width inline-block; which will prevent the
   text-decoration from inheriting into them */
div>ul ul {
  display:inline-block;
  width: calc(100% - 40px);
}

div>ul>li {
  text-decoration: underline;
  color: blue;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3
      <ul>
        <li>Item 31</li>
        <li>Item 32</li>
      </ul>
    </li>
  </ul>
</div>

子选择器为何选择所有后代？

2 个答案: