CSS選擇器和其優先順序的簡單介紹
阿新 • • 發佈:2018-12-05
CSS的簡單語法:
在一個style標籤中,去編寫CSS內容,最好將style標籤寫在這個head標籤中
<style>
選擇器{
屬性名稱:屬性的值;
屬性名稱2: 屬性的值2;
}
</style>
CSS選擇器: 幫助我們找到我們要修飾的標籤或者元素。
1.三種常用選擇器:
元素選擇:
元素的名稱{
屬性名稱:屬性的值;
屬性名稱:屬性的值;
}
ID選擇器:
以#號開頭 ID在整個頁面中必須是唯一的s
#ID的名稱{
屬性名稱:屬性的值;
屬性名稱:屬性的值;
}
類選擇器:
以 . 開頭
.類的名稱{
屬性名稱:屬性的值;
屬性名稱:屬性的值;
}
2.CSS的優先順序
按照選擇器搜尋精確度來編寫: 行內樣式 > ID選擇器 > 類選擇器 > 元素選擇器
就近原則: 哪個離得近,就選用哪個的樣式.
也可以理解為由四個級別和各級別的出現次數決定的。
四個級別分別為:行內選擇符、ID選擇符、類別選擇符、元素選擇符。
優先順序的演算法:
每個規則對應一個初始"四位數":0、0、0、0
若是 行內選擇符,則加1、0、0、0
若是 ID選擇符,則加0、1、0、0
若是 類選擇符/屬性選擇符/偽類選擇符,則分別加0、0、1、0
若是 元素選擇符/偽元素選擇符,則分別加0、0、0、1
演算法:將每條規則中,選擇符對應的數相加後得到的”四位數“,從左到右進行比較,大的優先順序越高。