CSS组合符解释了两个选择器之间的关系。CSS选择器是用于出于样式目的选择元素的模式。 CSS选择器可以是简单选择器, 也可以是复杂选择器, 它由多个使用组合器连接的选择器组成。
CSS中有四种组合器, 下面将进行讨论：
- 通用同级选择器(〜)
- 辅助同级选择器(+)
- 子选择器(>)
- 后代选择器(空格)
常规同级选择器：通用同级选择器用于选择在第一个选择器元素之后的元素, 并且还与第一个选择器元素共享相同的父元素。这可用于选择共享相同父元素的一组元素。
<!DOCTYPE html>
< html >
< head >
< title >Combinator Property</ title >
< style >
div ~ p{
color: #009900;
font-size:32px;
font-weight:bold;
margin:0px;
text-align:center;
}
div {
text-align:center;
}
</ style >
</ head >
< body >
< div >General sibling selector property</ div >
< p >lsbin</ p >
< div >
< div >child div content</ div >
< p >G4G</ p >
</ div >
< p >Geeks</ p >
< p >Hello</ p >
</ body >
</ html >输出如下：
相邻兄弟选择器：相邻同级选择器用于选择相邻元素或指定选择器标记旁边的元素。该组合器仅选择一个紧挨指定标签的标签。
<!DOCTYPE html>
< html >
< head >
< title >Combinator Property</ title >
< style >
div + p{
color: #009900;
font-size:32px;
font-weight:bold;
margin:0px;
text-align:center;
}
div {
text-align:center;
}
p {
text-align:center;
}
</ style >
</ head >
< body >
< div >Adjacent sibling selector property</ div >
< p >lsbin</ p >
< div >
< div >child div content</ div >
< p >G4G</ p >
</ div >
< p >Geeks</ p >
< p >Hello</ p >
</ body >
</ html >输出如下：
子选择器：该选择器用于选择作为指定标签的直接子元素的元素。此组合器比后代选择器严格, 因为如果组合器具有第一个选择器元素作为其父级, 则它仅选择第二个选择器。
<!DOCTYPE html>
< html >
< head >
< title >Combinator Property</ title >
< style >
div > p{
color: #009900;
font-size:32px;
font-weight:bold;
margin:0px;
text-align:center;
}
div {
text-align:center;
}
p {
text-align:center;
}
</ style >
</ head >
< body >
< div >Child selector property</ div >
< p >lsbin</ p >
< div >
< div >child div content</ div >
< p >G4G</ p >
</ div >
< p >Geeks</ p >
< p >Hello</ p >
</ body >
</ html >输出如下：
后代选择器：该选择器用于选择指定标签的所有子元素。标签可以是指定标签的直接子级, 也可以位于指定标签的深处。该组合器将两个选择器组合在一起, 以使所选元素的祖先与第一个选择器元素相同。
<!DOCTYPE html>
< html >
< head >
< title >Combinator Property</ title >
< style >
div p{
color: #009900;
font-size:32px;
font-weight:bold;
margin:0px;
text-align:center;
}
div {
text-align:center;
}
p {
text-align:center;
}
</ style >
</ head >
< body >
< div >Descendant selector property</ div >
< p >lsbin</ p >
< div >
< div >child div content</ div >
< p >G4G</ p >
< p >Descendant selector</ p >
</ div >
< p >Geeks</ p >
< p >Hello</ p >
</ body >
</ html >输出如下：
