## 选择器的优先级 **考察点** 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