高級選擇器 ## 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標簽的文字顏色為紅色。