CSS组合器/组合符详细介绍和用法

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 >

【CSS组合器/组合符详细介绍和用法】输出如下：