html 层次选择器,CSS选择器（2）——层次选择器

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

层次选择器

后代选择器

后代选择器(E F)就是可以选择某元素的后代元素。例如E为祖先元素，F为后代元素，表达的意识就是选择E元素的所有后代F元素，这里的F元素不管是E元素的子元素、孙辈元素或者更深层次的关系，都将被选中。

ul em {color:red; font-weight:bold;}

• List item 1
  1. List item 1-1
  2. List item 1-2
  3. List item 1-3
     1. List item 1-3-1
     2. List item 1-3-2 <<========
     3. List item 1-3-3
  4. List item 1-4
• List item 2
• List item 3

子选择器

子选择器(E > F)只能选择某个元素的子元素，其中E为父元素，F为子元素，其中 E > F 表示选择了E元素下所有子元素F。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

This is

very

very

important.

This is

really

very

important.

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响。

相邻兄弟选择器

相邻兄弟选择器(E + F)选择紧接在另一个元素后的元素，它们具有一个相同的父元素，E和F是同辈元素，E在F的前面，且相邻，记住选中的是F。

ul + ol {font-weight:bold;}

这个规则会把ul后面紧接着第一个ol元素字体变粗，第二个及其后面的不受影响。

通用兄弟选择器

通用兄弟选择器(E~F)是CSS3新增加的，用于选择某元素后面的所有兄弟元素，它们和相邻兄弟选择器类似，需要在同一个父元素之中。

ul ~ ol {font-weight:bold;}

这个规则会把ul后面所有的ol元素。

比较

后代选择器，选择E元素的所有后代F元素

子选择器，选择E元素的所有子F元素

相邻兄弟选择器，E和F是同辈元素，选择E后面紧挨着的F元素

通用兄弟选择器，E和F是同辈元素，选中E后面的所有的F元素