CSS選擇器的優先級
css中有四種基本選擇器，就一般開發而言，css一般採用clss選擇器進行dom樣式編輯，而id則交給js進行一些邏輯交互處理（也有不少例外，這裏是一般習慣來說，並沒有特別嚴格的標準）。
!important > 行內選擇器 > id選擇器 > 類選擇器 > 標籤選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: red;
}
/*標籤選擇器*/
div {
margin: 0 auto;
}
/*class選擇器*/
.cla {
background-color: red;
}
/*id選擇器*/
#my_id {
background-color: blue;
}
</style>
</head>
<body>
<!-- 行內選擇器style -->
<div class="cla" id = "my_id" style="background-color:yellow">學完了安卓，繼續學<span>前端</span>喲</div>
</body>
</html>
其他選擇器
1. 後代選擇器
該選擇器指向的是某節點的某個後代結點，使用選擇器之間有空格分隔例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
.d1{
background-color: pink;
}
.d1 .d2 { // 選擇的是.d1的後代節點.d2
color: yellow;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">我是後代1</div>
<div class="d3">我是後代2</div>
</div>
</body>
</html>
2. 交集選擇器
交集選擇器的寫法爲： 選擇器A選擇器B ，兩個選擇器之間是連起來的，沒有分隔。指向既滿足選擇器A且滿足選擇器B的元素結點
// 交集選擇器
div.d3 {
color: green;
}
3. 並集選擇器
並集選擇器的寫法：用逗號隔開。
.d2, .d3{
background-color: red ;
}
4、僞類選擇器
其對應幾種不同的狀態：
link：超鏈接點擊之前（對於<a>標籤）visited：超鏈接點擊之後（對於<a>標籤）focus：是某個標籤獲得焦點的時候（比如某個輸入框獲得焦點）hover：鼠標放到某個標籤上的時候active：點擊某個標籤沒有松鼠標時
5. 子代選擇器
與後代選擇器不同的是，子代選擇器只選擇到第一代。使用 父節點選擇器 > 子結點選擇器 的寫法。
.d1>d2{
background-color: pink;
}
6. 兄弟選擇器
兄弟選擇器表示兩個並列的結點，通過某結點選擇到它的下一個兄弟結點。使用 “+” 號分隔。
.d2+.d3{
font-size: 28px;
}
7. 序選擇器
通過 XXX:first-child 選擇XXX下的第一個子代結點；通過 XXX:last-child 選擇XXX下的最後一個子代結點。
<style type="text/css">
ul li:first-child{ //選擇第一個子元素
color:red;
}
ul li:last-child{ //選擇最後一個子元素
color:red;
}
</style>
<ul>
<li class="first">項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li class="last">項目</li>
</ul>