空间和＆gt;之间的差异选择

Question

来自w3

的选择器6和7之间的差异是什么

标题说明了所有。

Answer 1

>被称为 child combinator ，它会选择直接后代的子项。

选择器之间的space表示第二个选择器必须是第一个选择器的子级，但不需要是直接子级（意味着孙子符合条件）。

这可以在以下内容中看到：

div {
  border: 1px solid black;
  padding: 20px;
}

.outer > .middle {
  background: green; /* Applied */
}

.outer .inner {
  background: red; /* Applied */
}

.outer > .inner {
  background: blue; /* Not applied */
}

<div class="outer">
  <div class="middle">
    <div class="inner">
    </div>
  </div>
</div>