.content[data-role=page]:nth-child(2){} 使用:first-child偽類時一定要保證前面沒有兄弟節點，你前面有個content所以會失效
1
2
3
你把這里的span去掉和加上再看效果 就明白了很古老的話題了
id=100
class=10
tag（標簽）=1
按照這個規律去計算，比如
#qietu div{}
100+1 = 101
.qietu .box{}
10+10=20
可以得出第一個的權重要比第二個要高。另外關于權重的擴展知識面，我推薦了解下BEM命名規則，這個觀念很好，可以從側面杜絕權重問題的產生，還有一個就是提高權重的方法 !important;
基本選擇器
1.標簽選擇器：直接用元素的標簽來進行選擇
span { // 直接選擇span標簽
size:16px;
}
1
2
3
1
2
3
2.ID選擇器：通過設置id名字，進行精確的選擇，用#來定義
# div1 { //通過id名字來進行選擇
color:red;
}
<div id="div1">1</div>
1
2
3
4
1
2
3
4
3.類選擇器:通過類名來進行選擇，選擇范圍比id選擇器大，用’.'來定義
.div1 { //所有類名為div1的都被選擇了
color:red;
}
<div id="div1">1</div>
<div id="div1">1</div>
<div id="div1">1</div>
1
2
3
4
5
6
1
2
3
4
5
6
4.通配符選擇器：范圍更大，作用于所有標簽，用*來定義
不建議使用，對頁面加載負擔大
高級選擇器
1.后代選擇器：定義用空格隔開
div span { //選擇的是div標簽下的span標簽，當然后代顧名思義可以不止隔一代，可以隔多代進行選擇
color：red；
}
<div><span>1</span></div>
1
2
3
4
1
2
3
4
2.交集選擇器：與后代選擇器定義的不同是，沒有空格隔開，兩個元素緊挨著
span#a1 { //選擇的是兩個條件1.既是span標簽的 2.id名是a1的元素，兩個條件缺一不可
color：red；
}
<span id=“a1”>1</span>
<span >1</span>
1
2
3
4
5
1
2
3
4
5
3.并集選擇器：定義用逗號隔開
span，#a1 { //選擇的是1.是span標簽的 2.id名是a1的元素，兩個條件滿足一個即可
color：red；
}
<span id=“a1”>1</span>
<span >1</span>
1
2
3
4
5
1
2
3
4
5
4.偽類選擇器：
1.靜態偽類：點擊連接之前（link），點擊連接之后(visited)這樣的
2.動態偽類：鼠標移入（hover），點擊之后（focus）
1. 打開文檔，然后打開“CSS樣式”面板。
2. 在“CSS樣式”面板中，點擊右下角的“新建 CSS 規則”按鈕，打開“新建 CSS 規則”對話框。
在“選擇器類型”中選擇“復合內容(基于選擇的內容)”項。
在“選擇器名稱”中點擊右邊的下拉箭頭，我們可以看到：
a:link：未訪問的超鏈接。
a:visited：已經訪問過的超鏈接。
a:hover：鼠標指針移動到上面時的超鏈接。
a:active：正在訪問的超鏈接。
3. 在“選擇器名稱”中選擇“a:link”項，然后點擊“確定”按鈕，打開“CSS 規則定義”對話框。
4. 在“CSS 規則定義”對話框中，在“分類”下拉框中選擇“類型”，然后在右邊“類型”部分設置鏈接字體的顏色、大小和修飾等。
5. 設置好以后單擊“確定”按鈕，完成“a:link”項的設置。