CSS中级-7 CSS 组合器

却尘

CSS 组合器

组合器是解释选择器之间关系的某种机制。

CSS选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。

CSS中有四种不同的组合器：

·       后代选择器 (空格)

·       子选择器 (>)

·       相邻兄弟选择器 (+)

·       通用兄弟选择器 (~)

后代选择器

后代选择器匹配属于指定元素后代的所有元素。

下面的例子选择 <div> 元素内的所有 <p> 元素：

实例div p {  background-color: yellow;}
子选择器

子选择器匹配属于指定元素子元素的所有元素。

下面的例子选择属于 <div> 元素子元素的所有 <p> 元素：

实例div > p {  background-color: yellow;}
相邻兄弟选择器

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。

兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。

下面的例子选择紧随 <div> 元素之后的所有 <p> 元素：

实例div + p {  background-color: yellow;}
通用兄弟选择器

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。

下面的例子选择属于 <div> 元素的同级元素的所有 <p> 元素：

实例div ~ p {  background-color: yellow;}
所有 CSS 组合选择器

选择器	示例	示例描述
element element	div p	选择 <div> 元素内的所有 <p> 元素。
element>element	div > p	选择其父元素是 <div> 元素的所有 <p> 元素。
element+element	div + p	选择所有紧随 <div> 元素之后的 <p> 元素。
element1~element2	p ~ ul	选择前面有 <p> 元素的每个 <ul> 元素。