子组合器
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
子组合器（>）被放在两个 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 |
浏览器兼容性
Loading…