子组合器

**子组合器** (>) 放在两个 CSS 选择器之间。它仅匹配由第二个选择器匹配的那些元素，这些元素是第一个选择器匹配的元素的直接子元素。

css

/* List items that are children of the "my-things" list */
ul.my-things > li {
  margin: 2em;
}

由第二个选择器匹配的元素必须是第一个选择器匹配的元素的直接子元素。这比后代组合器更严格，后代组合器匹配所有由第二个选择器匹配的元素，对于这些元素，存在一个由第一个选择器匹配的祖先元素，无论 DOM 中的“跳跃”次数如何。

语法

css

/* The white space around the > combinator is optional but recommended. */
selector1 > selector2 { /* style properties */ }

示例

CSS

css

span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}

HTML

html

<div>
  <span>
    Span #1, in the div.
    <span>Span #2, in the span that's in the div.</span>
  </span>
</div>
<span>Span #3, not in the div at all.</span>

结果

规范

规范
选择器级别 4 # child-combinators

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见

后代组合器