CSS选择器、优先级和常用的选择器

浏览数：35 / 时间：2015年06月09日

优先级（由高到低）：

1. id选择器（#myid）

2. 类选择器（.myclassname）

3. 标签选择器（div,h1,p）

4. 相邻选择器（h1+p）

5. 子选择器（ul < li）

6. 后代选择器（li a）

7. 通配符选择器（*）

8. 属性选择器（a[rel="external"]）

9. 伪类选择器（a:hover,li:nth-child）

上面九种选择器中ID选择器的效率是最高，而伪类选择器的效率则是最低。

element>element 选择器

定义父元素是 <div> 元素的每个 <p> 元素的样式。

注释：如果元素不是父元素的直接子元素，则不会被选择。

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
width: 100px;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #000;
}
</style>
</head>

<body>

<div>
  <p>1</p>
  <a><p>2</p></a>
</div>

</body>
</html>

element+element 选择器

定义div同一层级，并且为与div下面的p元素的样式。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 div + p {
 6 width: 100px;
 7 height: 50px;
 8 line-height: 50px;
 9 border-bottom: 1px solid #000;
10 }
11 </style>
12 </head>
13 
14 <body>
15 
16 <p>1</p><!-- 失败 -->
17 <div></div>
18 <p>2</p><!-- 成功 -->
19 <p>3</p><!-- 失败 -->
20 <a><p>4</p></a><!-- 失败 -->
21 
22 </body>
23 </html>

CSS [attribute] 选择器

定义p中有class标签的样式

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 p[class]{
 6   border-bottom: 1px solid #000;
 7 }
 8 </style>
 9 </head>
10 
11 <body>
12 
13 <p class="class1">1</p><!-- 失败 -->
14 <p>2</p><!-- 成功 -->
15 <p class="class3">3</p><!-- 失败 -->
16 
17 </body>
18 </html>

CSS [attribute=value] 选择器

定义了p中class等于class1的元素样式

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 p[class="class1"]{
 6   border-bottom: 1px solid #000;
 7 }
 8 </style>
 9 </head>
10 
11 <body>
12 
13 <p class="class1">1</p><!-- 成功 -->
14 <p>2</p><!-- 失败 -->
15 <p class="class3">3</p><!-- 失败 -->
16 
17 </body>
18 </html>

CSS [attribute~=value] 选择器

定义了p中class包含class1的元素样式

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 p[class~=class1]{
 6   border-bottom: 1px solid #000;
 7 }
 8 </style>
 9 </head>
10 <body>
11 
12 <p class="class1">1</p><!-- 成功 -->
13 <p class="class3">2</p><!-- 失败 -->
14 <p class="class1 class3">3</p><!-- 成功-->
15 
16 </body>
17 </html>

CSS [attribute|=value] 选择器

定义了p中class以cla1开头（cla11不是，但cla1-1就是）的元素样式

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 p[class|=cla1]{
 6   border-bottom: 1px solid #000;
 7 }
 8 </style>
 9 </head>
10 <body>
11 
12 <p class="cla1">1</p><!-- 成功 -->
13 <p class="cla11">2</p><!-- 失败 -->
14 <p class="cla1-1">3</p><!-- 成功 -->
15 
16 </body>
17 </html>

CSS3 element1~element2 选择器

定义div同一层级，并且在div下面的所有p元素的样式

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 div~p{
 6   border-bottom: 1px solid #000;
 7 }
 8 </style>
 9 </head>
10 <body>
11 <div></div>
12 <p>1</p><!-- 成功 -->
13 <a><p>2</p></a><!-- 失败 -->
14 <p>3</p><!-- 成功 -->
15 </body>
16 </html>

CSS3 [attribute^=value] 选择器

定义p中class已cla1开头的元素样式（与CSS [attribute|=value] 不同）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 p[class^="cla1"]{
 6   border-bottom: 1px solid #000;
 7 }
 8 </style>
 9 </head>
10 <body>
11 <p class="cla1">1</p><!-- 成功 -->
12 <p class="cla11">2</p><!-- 成功 -->
13 <p class="cla1-1">3</p><!-- 成功 -->
14 <p class="cla21">4</p><!-- 失败 -->
15 </body>
16 </html>

CSS3 [attribute$=value] 选择器

定义和CSS3 [attribute^=value] 一样，只不过是定义的结尾的元素

CSS3 [attribute*=value] 选择器

定义和CSS3 [attribute^=value] 一样，只不过是定义的包含value的元素

CSS3 :nth-child() 选择器

定义html中第2个p元素的样式。

odd【p:nth-child(odd)】奇数行和 even【p:nth-child(even)】偶数行是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 p:nth-child(2){
 6   border-bottom: 1px solid #000;
 7 }
 8 </style>
 9 </head>
10 <body>
11 <p>1</p><!-- 失败 -->
12 <p>2</p><!-- 成功 -->
13 <p>3</p><!-- 失败 -->
14 <p>4</p><!-- 失败 -->
15 </body>
16 </html>

CSS3 :nth-last-child() 选择器

同上，只不过跟最后一个开始选择。

CSS :first-child 选择器

第一个元素的样式

CSS :last-child 选择器

最后一个元素的样式

CSS3 :root 选择器

选择文档的根元素。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 :root{
 6   background-color: #000;
 7 }
 8 </style>
 9 </head>
10 <body>
11 </body>
12 </html>

CSS3 :disabled 选择器

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 input[type="text"]:disabled
 6 { 
 7 background-color: #dddddd;
 8 }
 9 </style>
10 </head>
11 <body>
12 <input type="text" value="1" disabled /><!-- 成功 -->
13 <input value="2" disabled /><!-- 成功 -->
14 <input type="text" value="3" /><!-- 失败 -->
15 <input type="text" value="4" /><!-- 失败 -->
16 <input type="password" value="5" /><!-- 失败 -->
17 </body>
18 </html>

CSS3 :not 选择器

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 p {
 6 color:#000000;
 7 }
 8 :not(p)
 9 {
10 color:#ff0000;
11 }
12 </style>
13 </head>
14 <body>
15 <h1>1</h1><!-- 成功 -->
16 <p>2</p><!-- 失败 -->
17 <p>3</p><!-- 失败 -->
18 <div>4</div><!-- 成功 -->
19 </body>
20 </html>