css3层次选择器的用法是什么

本教程操作环境：windows10系统、CSS3&&HTML5版本、Dell G3电脑。

层次选择器通过HTML的DOM元素之间的层次关系获取元素，其主要的层次关系包括后代，父子，相邻兄弟和通用兄弟几种关系，通过其中某类关系可以方便快捷地选定需要的元素。层次选择器语法如下：

选择器	类型	功能描述
E F	后代选择器（包含选择器）	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E > F	子选择器	选择匹配的F元素，且匹配的F元素师所匹配的E元素的子元素
E + F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E ~ F	通用选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

IE7以及以上版本的浏览器包括其他各类浏览器都支持层次选择器。（IE6不支持）

下面通过一个HTML文件说明各类层次选择器的使用方式：

使用CSS3层次选择器

显示效果如下：

其DOM树结构如下：

后代选择器：

后代选择器（E F）也称为包含选择器，作用就是可以选择某元素的后代元素。例如“E F”， E为祖先元素，F为后代元素，表达的意思就是E元素的所有后代F元素，这里的F元素不管是E的子元素，孙辈元素，或者更深层次的关系，都将被选中。

换句话说，不管F在E中有多少层级关系，F元素都将被选中。

下面使用后代选择器改变其背景颜色，在上述HTML元素CSS代码的最后增加如下样式：

p p {background: orange}

显示效果如下：

子选择器：

子选择器智能选择某元素的子元素，其中E为父元素，而F为子元素，其中E>F表示选择了E元素下所有子元素F。这与后代选择器不一样，后代选择器中，F是E的后代，而在E>F中F仅仅是E的子元素而已。

下面代码用来改变body下的子元素p的背景色：

body > p {background:green;}

显示效果如下：

相邻兄弟选择器：

相邻兄弟选择器可以选择紧邻在另一个元素后面的元素，它们具有一个相同的父元素。换句话说E和F是同辈元素，F元素在E元素后面，并且相邻。

下面代码用来改变class为active的p元素的相邻兄弟元素背景颜色，为了方便起见，为上述HTML元素的第一个p元素增加class属性，如下：

然后在其CSS代码最后增加如下样式：

.active + p {background:lime}

显示效果如下：

通用兄弟选择器：

用于选择某元素后面的所有兄弟元素，它们和相邻兄弟元素选择器类似，需要在同一个父元素之中，也就是说E元素和F元素是同辈元素，并且F元素在E元素之后。

在上述HTML的CSS代码最后增加如下样式：

.active ~ p {background:red;}

显示效果如下：

（学习视频分享：css视频教程）

以上就是css3层次选择器的用法是什么的详细内容，更多请关注php中文网其它相关文章！