您现在的位置是: 文字教程> 前端教程> CSS/CSS3教程>

CSS基础教程第22课,CSS组合选择符-

2019-06-21 17:36:205
CSS组合选择符组合选择符说明了两个选择器直接的关系。CSS组合选择符包括各种简单选择符的组合方式。在 CSS3 中包含了四种组合方式:后代选取器(以空格分隔)子元素选择器(以大于号分隔)相邻兄弟选择器(以加号分隔)普通兄弟选择器(以破折号分隔)

CSS组合选择符

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

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

在 CSS3 中包含了四种组合方式:

后代选取器(以空格分隔)

子元素选择器(以大于号分隔)

相邻兄弟选择器(以加号分隔)

普通兄弟选择器(以破折号分隔)

后代选取器

后代选取器匹配所有值得元素的后代元素。

以下实例选取所有p元素插入到div元素中:

后代选取器

运行程序观察一下

子元素选择器

与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。

以下实例选择了

元素中所有直接子元素 p :

子元素选择器

运行程序观察一下

##相邻兄弟选择器

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。

以下实例选取了所有位于 div 元素后的第一个 p 元素:

相邻兄弟选择器

运行程序观察一下

##普通相邻兄弟选择器

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

以下实例选取了所有 div 元素的所有相邻兄弟元素 p :

普通相邻兄弟选择器

运行程序观察一下

文章评论