CSS 关系选择器 > 子组合器

子组合器 child combinator

符号：>，使用大于符号表示子组合器。

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.

子组合器（>）被放在两个CSS选择器之间。满足第一个选择器匹配的元素下的第二个选择器匹配的所有直接子元素。

作用

第一个选择器下满足第二个选择器的所有直接子元素。

示例

div元素下直接子元素span背景都是yellow。

1号4号背景都是yellow，2号和3号没有背景色。

div > span {
    background-color: yellow;
}

<div>
  <span>
    1 号 span，在 div 中。
    <span>2 号 span，在 div 中的 span 中。</span>
  </span>
  <p>abcdefg</p>
  <span>4号 span</span>
</div>
<span>3 号 span，不在 div 中。</span>

参考文档

https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator