层次选择器通过html的DOM元素间的层次关系获取元素，其主要的层次关系包括后代，父子，相邻兄弟和通用兄弟几种关系，通过其中某类关系可以方便快捷的选定需要的元素，目前IE7以上的浏览器都支持层次选择器

 

层次选择器语法

E F 后代选择器  匹配F元素，并且匹配F元素被包含在匹配的E元素中

E>F 子选择器    匹配F元素，并且F元素是E元素的子元素

E+F 相邻选择器  匹配F元素，并且F元素位于E元素的后面

E~F 通用选择器  匹配位于E元素后的所有匹配的F元素，F元素和E元素是同级元素

 

后代选择器

也被称为包含选择器，作用就是可以选择某元素的后代元素，“E F” 这里的F元素不管是E元素的子元素，孙元素或者更深层次的关系，都将被选中，无论F在E中有多少层次关系，F元素都会选中

 

子选择器

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

 

相邻兄弟选择器

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

 

通用兄弟选择器

通用兄弟选择器是CSS3新增加的，用于选择某元素后面的所有兄弟元素，它们和相邻兄弟选择器类似，需要在同一个父元素中，也就是说，E和F元素都是同辈元素，并且F元素在E元素之后，通用兄弟选择器选中的是与E元素相邻的后面兄弟元素F，其选中的是一个或多个元素，而相邻兄弟选择器选中的仅仅是与E元素相邻并且紧挨的兄弟元素F，其选中的仅是一个元素。