直接子代组合器 Child combinator

Docs

直接子代组合器 Child combinator：> 组合器选择前一个元素的直接子代的节点。

语法：A > B
例子：ul > li 匹配直接嵌套在 <ul> 元素内的所有 <li> 元素。

直接子代组合器 Child combinator
/* List items that are children of the "my-things" list */
ul.my-things > li {
  margin: 2em;
}

当使用 > 选择符分隔两个元素时，它只会匹配那些作为第一个元素的直接后代 (子元素) 的第二元素。与之相比，当两个元素由后代选择器相连时，它表示匹配存在的所有由第一个元素作为祖先元素 (但不一定是父元素) 的第二个元素，无论它在 DOM 中"跳跃" 多少次。

HTML
CSS

<div class="css-child-combinator-demo">
  <p><span class="span1">Span #1, div.css-child-combinator-demo &gt; p &gt; span.span1</span></p>
  <p><span class="span2">Span #2, div.css-child-combinator-demo &gt; p &gt; span.span2</span></p>
  <p><span class="span3">Span #3, div.css-child-combinator-demo &gt; p &gt; span.span3</span></p>
</div>

.css-child-combinator-demo .span2 {
  background-color: dodgerblue;
}

.css-child-combinator-demo > p > .span3 {
  background-color: green;
}

http://localhost:3000/css-child-combinator.html

Span #1, div.css-child-combinator-demo > p > span.span1

Span #2, div.css-child-combinator-demo > p > span.span2

Span #3, div.css-child-combinator-demo > p > span.span3