CSS组合器
组合器可以解释选择器之间的关系。
CSS选择器可以包含多个简单选择器。在简单的选择器之间,我们可以包括组合器。
CSS中有四种不同的组合器:
- 后代选择器(空格)
- 子选择器(>)
- 相邻的兄弟选择器(+)
- 一般兄弟选择器(〜)
后代选择器
后代选择器匹配作为指定元素后代的所有元素。以下示例选择<div>元素内的所有<p>元素:
div p {
background-color: yellow;
}
子选择器
子选择器选择作为指定元素的直接子元素的所有元素。以下示例选择所有<p>元素,它们是<div>元素的直接子元素:
div > p {
background-color: yellow;
}
相邻的兄弟选择器
相邻的兄弟选择器选择与指定元素的相邻兄弟节点相关的所有元素。同级元素必须具有相同的父元素,“邻近”表示“紧跟其后”。以下示例选择紧跟在<div>元素之后的所有<p>元素:
div + p {
background-color: yellow;
}