高级选择器 ## 5.5 后代选择器 通过标签之间的后代关系去决定选择某个范围内的元素 书写方法：使用空格连续链接多级选择器 <p style="color:red">后代选择器优点：同一个盒子里的标签比如A标签，P标签等会受影响，不是一个盒子里面A标P标签等，不会受影响</p> <h2>后代选择器优点代码案例：</h2> ``` .box p{ 颜色位红色 } box盒子里所有颜色都会为红色 但是.box盒子以外的p就不受样式影响。 ``` <br/><br/><br/> 基本使用： ``` .box ul li { } .box2 ul li { } ``` 需要注意的是，后代关系不一定是父子关系 ## 交集选择器 规则：：交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为 class 选择器，两个选择器之间不能有空格。<br/> 作用就是进行满足所有选择器条的匹配 ``` 一般用于公共样式 比如给li设置一个盒子， li{ width:500px; float:left; } 进行浮动后 然后LI class="xo" xo为公共布局 这样既有了li的样式也有了xo公共样式。 ``` 书写方法：将多个选择器链接书写，中间没有空格，不需要添加任何付号 ``` div.p{ } //中间不能用空格 ``` (必须要学好） ## 并集选择器 有“和”的意思，多个标签设置同样的属性 书写方法：将多个选择器使用逗号进行链接，最后一个不能加逗号 ``` p,div{ color : red; } ``` 这样P标签和DIV标签都一样的样式了 并集选择器非常灵活，可以集合多个选择器使用利用逗号进行分割 ``` #par .par li,p{ color:red; } ``` 上面的代码指的是#par里面的li和p标签的文字颜色为红色。