优先级（由高到低）：
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>