## 選擇器的優先級 **考察點** 1. 選擇器的類型 2. 選擇器的優先級 **回答** 1. 選擇器的類型包括：id選擇器， 類選擇器， 標簽選擇器， 屬性選擇器， 偽類選擇器。 2. 選擇器的優先級： id > 類 = 偽類 = 屬性 > 標簽 ### 選擇器解釋： 1. id選擇器。 `#test` 匹配id為test的任何元素， 如`<div id="test"></div>` 2. 類選擇器。`.test`匹配class為test的任何元素，如`<div class="test"></div>` 3. 標簽選擇器。`img`匹配所有的img標簽，如`<img src=""/>` 4. 屬性選擇器。`input[type="text"]`匹配類型為text的input，如`<input type="text"/>` 5. 偽類選擇器.`p:first-child`匹配第一個p標簽，如: ```html <div> <p>這個被匹配了</p> <p>這個沒有被匹配</p> </div> ``` ### 選擇器優先級證明 代碼：id和偽類對比，兩者全為紅色，證明 **id選擇器>偽類選擇器**的優先級 ```css #test{color:red;} :first-child{color:green;} :nth-child(2){color:green;} #test-new{color:red;} ``` ```html <p id="test">blabla...</p> <p id="test-new">blabla...</p> ``` 結果  代碼：class和偽類對比，后寫選擇器覆蓋先寫的選擇器的樣式，證明 **class選擇器=偽類選擇器**的優先級 ```css .test{color:red;} :first-child{color:green;} :nth-child(2){color:green;} .test-new{color:red;} ``` ```html <p class="test">blabla...</p> <p class="test-new">blabla...</p> ``` 結果  代碼： class和屬性選擇器對比，后寫選擇器覆蓋先寫的選擇器的樣式， 證明 **class=屬性選擇器**的優先級 ```css .test{color:red;} [title="test"]{color:green;} [title="testnew"]{color:green;} .test-new{color:red;} ``` ```html <p class="test" title="test">blabla...</p> <p class="test-new" title="testnew">blabla...</p> ``` 結果  ### 拓展1： 組合選擇器 **.cls1, .cls2**: 匹配class包含cls1或cls2的元素 ```html <p class="cls1">我能匹配</p> <p class="cls2">我能匹配</p> <p class="cls3">我不能匹配</p> ``` **.cls1 .cls2**：匹配class包含cls1的后代中class包含cls2的元素 ```html <div class="cls1"> <div class="cls2">我能匹配</div> <div class="cls3"> <div class="cls2">我能匹配</div> </div> </div> <div class="cls3"> <div class="cls2">我不能匹配</div> </div> ``` **.cls1>.cls2**：匹配class包含cls1的元素的直接子元素class包含cls2的元素 ```html <div class="cls1"> <div class="cls2">我能匹配</div> <div class="cls3"> <div class="cls2">我不能匹配</div> </div> </div> <div class="cls3"> <div class="cls2">我不能匹配</div> </div> ``` **.cls1+.cls2**： 匹配class包含cls1的元素后面一個class包含cls2的元素 ```html <div class="cls1"> <div class="cls2">我不能匹配</div> <div class="cls3"> <div class="cls2">我不能匹配</div> </div> </div> <div class="cls2">我能匹配</div> <div class="cls2">我不能匹配</div> ``` **.cls1~.cls2**：匹配class包含cls1的元素后面的所有class包含cls2的元素 ```html <div class="cls1"> <div class="cls2">我不能匹配</div> <div class="cls3"> <div class="cls2">我不能匹配</div> </div> </div> <div class="cls2">我能匹配</div> <div class="cls3">我不能匹配</div> <div class="cls2">我能匹配</div> ``` ### 拓展2：屬性選擇器泛匹配 **[title="test"]** 匹配title為test的元素 ```html <p title="test">我能匹配</p> <p title="atest">我不能匹配</p> <p title="testa">我不能匹配</p> <p title="atesta">我不能匹配</p> ``` **[title^="test"]** 匹配title的值開頭為test的元素 ```html <p title="test">我能匹配</p> <p title="atest">我不能匹配</p> <p title="testa">我能匹配</p> <p title="atesta">我不能匹配</p> ``` **[title$="test"]** 匹配title的值結尾為test的元素 ```html <p title="test">我能匹配</p> <p title="atest">我能匹配</p> <p title="testa">我不能匹配</p> <p title="atesta">我不能匹配</p> ``` **[title\*="test"]** 匹配title的值為包含test的元素 ```html <p title="test">我能匹配</p> <p title="teest">我不能匹配</p> <p title="atest">我能匹配</p> <p title="testa">我能匹配</p> <p title="atesta">我能匹配</p> ``` 資料參考： http://www.w3school.com.cn/cssref/css_selectors.asp