在之前的文章《详解CSS的基本选择器，并聊聊选择器优先级》中，我们了解了CSS中的基本选择器，下面本篇文章我们聊聊层级选择器，希望对大家有所帮助！ 层级选择器 CSS层级选择器 是根据HTML节点树之间的关系提供的选择器用法，所以说如果想要很好的学习层级选择器 首先要搞清楚HMTL元素之间的关系是什么样子的。【推荐学习：css视频教程】 先看下面这段HTML代码： 76c82f278ac045591c9159d381de2c57 100db36a723c770d327fc0aef2ce13b1 93f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 8f6d5a544bbc0d98e0f297ef053f784d b2386ffb911b14667cb8f0f91ea547a7HTML测试代码6e916e0f7d1e588d4f442bf645aedb2f 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d dc6dce4a544fdca2df29d5ac0ea9906b e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 16b28748ea4df4d9c2150843fecfba68 dc6dce4a544fdca2df29d5ac0ea9906b 45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114 bb9345e55eb71822850ff156dfde57c865281c5ac262bf6d81768915a4a77ac0 45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114 16b28748ea4df4d9c2150843fecfba68 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e 将如上代码可以画成如下节点树，如下图所示 现在来我们看一个HTML元素之间的关系，在HTML页面中元素之间的关系存在着如下所示的三种关系： 父级与子级之间的关系 ：在上述代码中，左边dc6dce4a544fdca2df29d5ac0ea9906b元素是e388a4556c0f65e1904146cc1a846bee元素的的父级元素，反之e388a4556c0f65e1904146cc1a846bee是dc6dce4a544fdca2df29d5ac0ea9906b 的子级元素，当然这种父子结构还有跟多。 兄弟之间的关系 ：在上述代码代码中，e388a4556c0f65e1904146cc1a846bee元素和e388a4556c0f65e1904146cc1a846bee元素是兄弟元素，45a2772a6b6107b401db3c9b82c049c2元素和bb9345e55eb71822850ff156dfde57c8 元素也是兄弟元素。 祖先与后代之间的关系 ：在上述代码代码中，e388a4556c0f65e1904146cc1a846bee元素是6c04bd5ca3fcae76e30b72ad730ca86d元素的后代元素，反之6c04bd5ca3fcae76e30b72ad730ca86d元素是e388a4556c0f65e1904146cc1a846bee元素的祖先元素。 层级选择器种类 根据HTML元素之间的3种关系，CSS的层级选择器提供了如下4种用法： 后代选择器：将某个元素当做祖先元素，定位该元素的所有后代元素。 子级选择器：将某个元素当做父级元素，定位该元素的所有子级元素。 相邻兄弟选择器：将某个元素作为目标元素，定位与该目标元素拥有同一个父级元素的下一个指定元素 普通兄弟选择器：是将某个元素作为目标元素，定位与该目标元素拥有同一个父级元素的之后任意指定元素。 选择符 CSS提供的4个选择符，对应着CSS层级选择题的四种用法，如下所示 表示后代关系的空格（ ） 表示父子关系的尖括号（>） 表示相邻兄弟关系的加号（+） 表示兄弟关系的波浪号（~） 在Web开发中，用的较多的是前两个-后代选择器和子选择器。 我们先来看一段代码： 使用CSS3层次选择器 * {margin:0;padding:0;} body {width: 300px; margin:0 auto;} div{margin:5px;padding:5px;border:1px solid #ccc;} 1 2 3 4 5 6 7 8 9 10 后代选择器 用来选择某个元素的所有的后代元素，比如上面的html中，使用如下的样式，会产生什么效果呢？body div { background-color: yellow; }这里将body元素的后代div元素设置背景色为yellow。也就是说，所有的div都被染上了黄色。 子选择器 用于选择某个元素下（可能是多个元素）所有的一级子元素。比如，我们使用下面的选择器及样式，会有什么效果呢？body > div { background-color: red; }这样设置后，body下的一级div元素，这里是内容为1、2、3、4、7的div元素设置背景色为红色。 相邻兄弟选择器 用于选取某个（或某些）元素同级目录下的下一个元素。比如，这里我们使用下面样式设置后的效果是什么样的呢？.active + div { background-color: green; }这里我们设置了.active选择器的相邻兄弟节点，也就是第二个div元素，将其背景色设置为了绿色。 通用兄弟选择器 用于选取某个（或某些）元素的同级目录下所有的后面的标记。它和相邻兄弟选择器类似，需要在同一个父元素中。 比如使用下面的代码，影响到的样式：.active ~ div { background-color: pink; }这里将类名为"active"的元素（这里为第一个div）的通用兄弟（这里是内容为2、3、4、7的div）设置了背景色为粉红色。 （学习视频分享：web前端入门）
