css教程3.2——层次选择器

层次选择器 ———可以通过元素在文档中的层次关系来选择元素，包括子元素、后代元素、相邻元素等

 先看下面这个代码，这个就是层次关系，我们下面的例子都会以它作为body

1.后代选择器

        作用：用于选择某个元素的后代元素，使用空格分隔

        注意：会后代选择器会选中后代所有元素（比如：祖爷爷 爷爷 爸爸 你，当选中"祖爷爷"时，后面的“爷爷”，“爸爸”，“你”都会生效）

        例如：body p 会选择所有body元素下的p元素

效果 ：

2.子选择器

        作用：用于选择某个元素的直接子元素，使用>符号

        注意：子选择器只会选择后一代元素（比如：还是上面的例子，当选中“祖爷爷”时，只会有“爷爷”生效）

         例如：body> p 会选择body元素下的直接子元素p

效果： 

3.相邻兄弟选择器

        作用：用于选择某个元素的相邻兄弟元素，使用+符号

        注意：相邻关系只有一个，相邻且对下不对上

        例如：p4 + p 会选择紧接在p4元素后面的p元素

下面解释什么是“对下不对上” ：

        先看下面代码，思考p几会变色呢？

效果： 

看，只有p2变色，p0和p1没有变色，这就是“对下不对上” 

4.通用兄弟选择器

        作用：用于选择某个元素之后的所有兄弟元素，使用~符号

        注意：后面的元素是同级的哦

        例如：p2 ~ p 会选择p2元素之后的所有p元素

先看代码： 

效果： 

 

这里p7,p8同级，所有也会变色