1、行內樣式,style屬性內的特性值 1000
style
="width
: 100px;
">
onediv
>
2、id選擇器的特性值 100
#one
"one"
>
onediv
>
3、類選擇器、偽類選擇器、屬性選擇器特性值 10
/* 類選擇器 */
.one
/* 偽類選擇器 */
div:first-child
/* 屬性選擇器 */
[class=one]
class
="one"
>
onediv
>
4、標籤選擇器、偽元素選擇器特性值 1
/* 標籤擇器 */
div/* 偽元素擇器 */
div::after
>
onediv
>
5、其他選擇器* 空格 + > 特性值 0
6、計算方式如下:比如遇見乙個類選擇器,則選擇器的特性值加10,最終計算出整個css選擇器的特性值。如果css屬性有!important修飾,則優先順序最高。如果特性值一樣,則根據就近原則進行計算。
如:#one .two>div li 特性值為 100+10+1+1=112
選擇器優先順序 CSS選擇器優先順序總結
css選擇器優先順序這個問題,相信有點經驗前端都會認為非常簡單,但是我們今天還是來總結一下吧。相信大家應該很少直接在html頁面寫樣式吧,一般都是用link標籤匯入css樣式表。使用者自定義樣式表就是我們用link標籤引入的css樣式表,為了保持不同瀏覽器下樣式相同,所以我們的自定義樣式表一般都會覆...
CSS 選擇器優先順序
css優先順序包含四個級別 文內選擇器,id選擇器,class選擇器,元素選擇器 以及各級別出現的次數。根據這四個級別出現的次數計算得到css的優先順序。css優先順序的計算規則如下 頁面中直接設定style,加1,0,0,0 每個id選擇器 如 id 加0,1,0,0 每個class選擇器 如 c...
css選擇器優先順序
css優先順序即css樣式在瀏覽器中被解析出來的先後順序。css優先順序包含四個級別 行內樣式,id選擇符,class類選擇符,元素選擇符 以及各級別出現的次數。繼承是css的乙個主要特徵,然後繼承的權重很低,比普通元素還要低。1.行內樣式 類似css 的樣式 的優先順序為1,0,0,0,始終高於外...