關系選擇器是通過元素之間的“位置關系的特征”來確定所選元素。 ## 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。