关系选择器是通过元素之间的“位置关系的特征”来确定所选元素。 ## 14.3.1.子代选择器：S1>S2 匹配S1中的下一级S2。下一级就是“子级”，或子代。 其中S1，S2都可以是独立使用的选择器（比如id选择器，class选择器，标签选择器等）。 比如S1为div， S2为p，即形式为“div > p”，就表示找出div中的所有子级p标签。 又比如： ``` #p1>a{ ... } ：表示找出id为p1的标签中的所有子代a标签。 .cc>p{ ... } ：表示找出class为cc的标签中的所有子代p标签。 #p2>.cc2>img{ ... } ：表示找出id为p2中的子代的class为cc2中的所有子代img标签。 ``` ## 14.3.2.后代选择器：S1 S2 匹配S1内部的所有后代S2。 此时就不仅仅局限于子代标签了，还包括孙代，曾孙代，等等。 简单说，就是找出放在S1所选中的标签中的所有S2所选中的标签。 比如： ``` div p{ ... } ：匹配div中的所有后代p标签，即凡是放在div中的p标签都会找出来。 #p1 a{ ... } ：匹配id为p1的标签中的所有a标签，即只要a标签在#p1中就可以。 .cc p{ ... } ：匹配class为cc的标签中的所有p标签，即只要p标签在.cc中就可以。 #p2 .cc2 img{ ... } ：匹配id为p2中的class为cc2中的所有img标签。 ``` ## 14.3.3.相邻选择器：S1+S2 匹配S1后面紧挨着的同级（兄弟）元素S2。 ## 14.3.4.兄弟选择器：S1~S2 匹配S1后面的所有同级（兄弟）元素S2。