層次選擇器
1.后代選擇器：E F 選擇匹配的F元素，且匹配的F元素被包含在匹配的E元素內(nèi)
? <style>ul? li{
? ? ? ? ? ? color: red;? ?} </style>
<ul>
? ? ? ? <li>我是ul里面的li</li>
? ? ? ? <li>我是ul里面的li</li>
? ? ? ? <li>我是ul里面的li</li>
? ? </ul>? li是ul的孫子級別
? ? <ul>
? ? ? ?<p> <li>我是ul里面的li</li></p>
? ? ? ? <p> <li>我是ul里面的li</li></p>
? ? ? ? <p> <li>我是ul里面的li</li></p>
? ? </ul>? li是ul的孫子級別
后代選擇器兩個選擇符之間必須要以空格隔開，中間不能有任何其他的符號插入，空格可以多 但是不可以插入其他的符號以免造成干擾。?li 被 ul包裹的情況下 顏色變紅
2.子選擇器：E>F 選擇匹配的F元素，且匹配的F元素是匹配的E元素的子元素
?<style> div span{
? ? ? ? ? ? color: red;? ?}
? ? ? ? h2 >span{ color: green; } </style>
?<div>
? ? ?<p><span>早上好</span></p>
? ? ? ? <p><h1><span>我是標(biāo)題</span></h1></p>
? ? ? ? <h2><span>晚上好</span></h2>
? ? </div>
div元素中包裹的子元素span 顯示為紅色，h2元素中包裹的子元素span顯示為綠色，> 左右可以添加空格
3.相鄰選擇器：?E+F 相鄰兄弟選擇器 選擇匹配的F元素，且匹配的F元素緊位于匹配的E元素后面
?<style> .main+p{
? ? ? ? ? ? background: green; } </style>
<div>? ? ?<p>我是誰</p>
? ? ? ? <p class="main">我是誰</p>
? ? ? ? <p>我是誰</p>? ? ?</div>
類選擇器main相鄰的下一個p背景色變綠
4.通用選擇器：E~F 通用兄弟選擇器 選擇匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
<style>? .ab~p{
? ? background: red;} </style>
<div>? ? <p class="ab">111</p>
? ? ? ? <p>222</p>
? ? ? ? <p >333</p>
? ? ? ? <p>444</p>
? ? ? ? <p>555</p>? ? </div>
類選擇器ab下面的所有p標(biāo)簽都會變成紅色
屬性選擇器
1.E[attr]屬性選擇器：?E[attr] ?選擇匹配具有屬性attr的E元素
<style>? dd[class]{
? ? ? background: red; }? </style>
?<dl>? <dt>汽車</dt>
? ? ? ? <dd>寶馬</dd>
? ? ? ? <dd class>奔馳</dd>
? ? ? ? <dd>奧迪</dd>? ?</dl>
?[ ]表示屬性的意思 里面寫具體屬性的名稱比如 [id]
2.E[attr=val]屬性選擇器:E[attr=val] ?選擇匹配具有屬性attr的E元素,并且屬性值為val（其中val區(qū)分大小寫）
<style>? ?dd[class=two]{
? ? ? ? ? ? background: red;? ?} </style>
<dl>? <dt>標(biāo)題</dt>
? ? ? ? <dd class="one">我是定義列表1</dd>
? ? ? ? <dd class="one">我是定義列表1</dd>
? ? ? ? <dd class="two">我是定義列表2</dd>? ?</dl>
E[attr=val]屬性選擇器中，屬性和屬性值必須完全匹配才能被選中,dd元素中class的值為two的背景顏色變成紅色
3.E[attr*=val]屬性選擇器:?選擇匹配元素E，且E元素定義了屬性attr，其屬性值包含了“val”
? ?dd[class=two]{<style> p[class*=b]
屬性后面的值加不加引號（包括單引號和雙引號）都可以 當(dāng)時遇到特殊符號需要加引號
? ? ? ? ? ? background: red;? ?} </style>
<div>? <p >111</p>
? ? ? ? <p class="b1">222</p>
? ? ? ? <p class="b2">333</p>? ?</div>
p元素中class的值只要包含b的背景色都會變成紅色,
4.E[attr^=val]屬性選擇器:E[attr^=val] 選擇匹配元素E，且E元素定義了屬性attr，其屬性值是以val開頭的任意字符串
<style>? a[href^='http://']{
? ? ? ? ? ? background:red;? } </style>
在遇到匹配的字符 有特殊符號 比如 :號 // 可以使用引號（單引號和雙引號）包裹一下
<a >跳轉(zhuǎn)百度</a>
? ? <a href="www.baidu.com">不能跳轉(zhuǎn)百度</a>
表示 屬性href是以http開頭的a元素 背景色變成紅色
5.E[attr$=val]屬性選擇器:E[attr$=val] ?選擇匹配元素E，且E元素定義了屬性attr，其屬性值是以val結(jié)尾的任意字符串
? a[href^='http://']{<style> a[href$=".cm"]
? ? ? ? ? ? background:red;? } </style>
在遇到匹配的字符 有特殊符號 比如 :號 // 可以使用引號（單引號和雙引號）包裹一下
<a >能跳百度</a>
? ? <a >因為百度把.cm的域名也買了所以也能跳了</a>
表示 屬性href是以cn結(jié)尾的a元素 背景色變成紅色
