CSS 组合器选择器
组合器是解释选择器之间关系的某种机制。
CSS 选择器可以包含多个简单选择器。在简单选择器之间,我们可以包含一个组合器。
CSS 中有四种不同的组合器:
1. 后代选择器 (空格)
2. 子选择器 (>)
3. 相邻兄弟选择器 (+)
4. 通用兄弟选择器 (~)
后代选择器
element element
后代选择器匹配属于指定元素后代的所有元素。
例如选中所有div元素内的所有p元素:
div p { background-color: red; }
子选择器
element>element
子选择器匹配属于指定元素子元素的所有元素。
例如选中所有div元素子元素的p元素:
div>p { background-color: red; }
相邻兄弟选择器
element+element
相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。
如下选择紧随 div元素之后的所有p元素:
div+p { background-color: red; }
通用兄弟选择器
element1~element2
通用兄弟选择器匹配属于指定元素的同级元素的所有元素。
如下选中属于div元素的同级元素的所有p元素:
div~p { background-color: red; }