-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
65 lines (45 loc) · 1.28 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
---
title: 子组合器
slug: Web/CSS/Child_combinator
---
{{CSSRef}}
**子组合器**(`>`)被放在两个 CSS 选择器之间。它只匹配那些被第二个选择器匹配的元素,这些元素是被第一个选择器匹配的元素的直接子元素。
```css
/* 选择属于“my-things”类的无序列表(ul)的直接子列表元素(li) */
ul.my-things > li {
margin: 2em;
}
```
被第二个选择器匹配的元素必须是被第一个选择器匹配的元素的直接子元素。这比[后代组合器](/zh-CN/docs/Web/CSS/Descendant_combinator)更严格,后者匹配所有被第二个选择器匹配的元素,这些元素存在被第一个选择器匹配的祖先元素,无论在 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>
```
### 运行结果
{{EmbedLiveSample("Examples", "100%", 100)}}
## 规范
{{Specifications}}
## 浏览器兼容性
{{Compat}}
## 参见
- [后代组合器](/zh-CN/docs/Web/CSS/Descendant_combinator)