CSS组合选择符

css组合选择符可以让我们直观明白选择器与选择器之间的关系

组合选择符说明了两个选择器直接的关系

css组合选择符包括各种简单选择符的组合方式

在css3中包含了四种组合方式：

1. 后代选择器（以空格分隔）例如：div  p
2. 子元素选择器（以大于号分隔）例如：div>p
3. 相邻兄弟选择器（以加号分隔）例如：div+p
4. 普通兄弟选择器（以波浪号分隔）例如：div~p

一、后代选择器

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

下面例子中选取所有的p标签插入到div标签中

html代码：

 

css代码：

 

浏览器呈现效果：

没有背景颜色的p标签是没有插入div标签中

 

• 子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素

下面例子选择了div标签中所有直接子元素p标签

html代码：

 

css代码：

 

浏览器呈现效果：

有颜色的p标签是div标签的子元素

 

三、相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一个元素后的元素，且两者有相同父元素

如果需要选择紧接在另一个元素后的元素，而且两者有相同的父元素，可以使用相邻兄弟选择器

下面例子选取了所有位于div标签后的第一个p标签

html代码：

 

css代码：

 

浏览器呈现效果：

有颜色的p标签是紧接着div标签，且两者都有相同的父元素

 

四、普通兄弟选择器

普通兄弟选择器选取所有指定元素的相邻兄弟元素

下面例子选取了所有div标签之后的所有相邻兄弟的p标签

html代码：

 

css代码：

 

浏览器呈现效果：