完整css選擇器總結與優先順序權重
css的選擇器,在前端開發中只是很小的一部分,但其重要性卻不可忽略。因為其比較繁瑣。在看了很多書籍和文章後。我發現選擇器的組織真的很混亂,沒有找到一個完整的總結。不敢保證我的是否是最完整的,但我已竭盡所能。話不多說,直接看下文:
1.萬用字元選擇器:*{
color:blue
}
//代表所有的標籤和元素
2.型別選擇器(標籤選擇器):body{
color:blue
}
//根據html標籤來進行選擇的選擇符
3.id和class選擇符:#id名{
color:blue
}
.class名{
color:blue
}
//需要注意的是id具有唯一性,而class不具有,而且id的優先順序高於class
4.偽類選擇器://常用的是錨偽類
a:link{} /*連結未訪問*/
a:visited{} /*連結已訪問*/
a:hover{} /*滑鼠移動到連結*/
a:active{} /*選定連結*/
a:focus{} /*聚焦時*/
a:lang{} /*元素帶有指定lang時*/
a:first-child{} /*元素在頁面第一次出現時*/
5.偽元素選擇器:a:before{} /* 在某個元素的前面插入內容*/
a:after{} /*在某個元素的後面插入內容*/
a:first-line /*為某個元素的文字首行設定特殊樣式,只能用於塊級元素*/
a:first-letter /*為某個元素的文字首字母或第一個字設定樣式,只能用於塊級元素*/
6.複合選擇器(包含以下幾種):
6.1交集選擇器:h3.class名{} //第一個必須是標籤選擇器,第二個必須是id或class選擇器
6.2並集選擇器:h1,h2,span{} //結果是同時選中各個基本選擇器所選擇的範圍。
6.3後代選擇器:p span{} //用空格分隔開,p標籤之間包含span標籤,外層標籤寫在前面,內層的標記寫在後面,發生巢狀時,內層標記就成了外層標記的後代。
6.4子選擇器:p>span{} //只對其直接後代有影響
各類優先順序權重比例如下:
//////構建頁面框架時,通常只給外層標記定義class或者id。
後代選擇器與子選擇的區別:
後代選擇包括在其標籤內部的所有標籤,可以是子標籤,孫子標籤,曾孫子標籤。。。。
子選擇器只對其直接後代有影響,即:只作用於子標籤。
樣式選擇器權重優先順序如下:
important的權重為 1, 0, 0, 0
ID選擇器的權重為 0, 1, 0, 0
類選擇器的權重為 0, 0, 1, 0
偽類選擇器的權重為 0, 0, 1, 0
屬性選擇器的權重為 0, 0, 1, 0
標籤選擇器的權重為 0, 0, 0, 1
偽元素選擇器的權重為 0, 0, 0, 1
萬用字元的權重為 0, 0, 0, 0
綜上,各選擇器的優先順序如下。
important > 內聯樣式 > ID > 類 | 偽類 | 屬性選擇 > 標籤 | 偽元素 > 繼承 > 萬用字元