子组合器

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

子组合器（>）被放在两个 CSS 选择器之间。它只匹配那些被第二个选择器匹配的元素，这些元素是被第一个选择器匹配的元素的直接子元素。

css
/* 选择属于“my-things”类的无序列表（ul）的直接子列表元素（li） */
ul.my-things > li {
  margin: 2em;
}

被第二个选择器匹配的元素必须是被第一个选择器匹配的元素的直接子元素。这比后代组合器更严格，后者匹配所有被第二个选择器匹配的元素，这些元素存在被第一个选择器匹配的祖先元素，无论在 DOM 上有多少“跳”。

语法

css
元素 1 > 元素 2 { 样式声明 }

示例

CSS

css
span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}

HTML

html
<div>
  <span>
    1 号 span，在 div 中。
    <span>2 号 span，在 div 中的 span 中。</span>
  </span>
</div>
<span>3 号 span，不在 div 中。</span>

运行结果

规范

Specification
Selectors Level 4
# child-combinators

浏览器兼容性

BCD tables only load in the browser

参见