CSS(Cascading Style Sheet)層疊樣式表
一.基本規則
1.CSS基本規則
選擇器 {
屬性: 值;
屬性: 值
}
2.選擇器
- 用於匹配HTML元素
- 有不同的匹配規則
- 多個選擇器可疊加
3.選擇器解析方式和性能
-
實例代碼
<body class="body"> Hello Jack! <div> <a class="jack">Jack</a> </div> </body> <style> .body div .jack { color: red; } </style> -
以上示例中，瀏覽器的解析CSS的方式是從右往左進行解析【出於性能考慮，目的：加快瀏覽器解析速度】
-
當瀏覽器看到樣式設置時，先找class爲jack的元素，之後驗證祖先是否是div，再驗證祖先class是否是body
二.選擇器分類
1.選擇器綜合分類
- 元素選擇器
a{} - 僞元素【真實存在的元素，頁面上真實存在】選擇器
::before{} - 類選擇器
.link{} - 屬性選擇器
[type=radio]{} - 僞類【是元素的狀態，不是頁面中真實存在的元素】選擇器
:hover{} - ID選擇器
#id{} - 組合選擇器
[type=checkbox]+label{} - 否定選擇器
:not(.link){} - 通用選擇器
*{}
2.選擇器權重
- ID選擇器
#id{}+100 - 類 屬性 僞類 +10
- 元素 僞元素 +1
- 其他選擇器 +0
- 權重高的在相同情況下會覆蓋權重低的樣式
- 權重計算數字是不進位的，即就算有11個類選擇器，也不會超過ID選擇器
- 影響選擇器權重的其他情況
!important優先級最高- 元素屬性 優先級高（直接寫在元素標籤的屬性style上）
- 相同權重 後寫的生效