css選擇器權重介紹

2021-10-25 06:55:45 字數 654 閱讀 2760

選擇器與偽元素的權重情況:高權重的選擇會覆蓋低權重的展示樣式

選擇器表示式或示例

說明權重

行內選擇器

style=""

1000

id選擇器

#aaa

100類選擇器

.aaa

10標籤選擇器

h1元素的tagname

1屬性選擇器

img[alt]、div[class^='pus']

10相鄰選擇器

selecter+selecter

拆分成兩個選擇器在計算

兄長選擇器

selecter ~ selecter

拆分成兩個選擇器在計算

後代選擇器

selecter selecter

拆分成兩個選擇器在計算

萬用字元選擇器*0

各種偽類選擇器

如:link 、:visited 、:hover等

10各種偽元素

如::first-child 、::after 、 ::before等

1!important

!important允許開發人員強制應用某樣式。用法解除安裝該樣式的某屬性值後,結束分號前,以便強制應用該樣式

div

css選擇器 權重

基礎選擇器 一 標籤選擇器 p h1 css不區分大小寫,建議小寫 1 所有的標籤都可以作為標籤選擇器去使用 2 無論這個標籤藏多深,一定能夠被選上 3 選擇頁面所有的,而不是具體某乙個 標籤選擇器,選擇的是頁面上所有這種型別的標籤,所以經常描述 共性 無法描述某乙個元素的 個性 的。二 id選擇器...

CSS選擇器權重問題

原則一 繼承不如指定 原則二 id class 標籤選擇符 原則三 越具體越強大 原則四 標籤 id id 標籤.class class css優先順序包含四個級別 標籤內選擇符,id選擇符,class選擇符,元素選擇符 以及各級別出現的次數 根據這四個級別出現的次數計算得到css的優先順序。css...

CSS選擇器,深入理解CSS選擇器權重

前端工程師經常和選擇器權重打交道,但是部分人還是一知半解,下面咱們一起學習一下吧。類選擇器 active 標籤選擇器 div 屬性選擇器 img alt 通用選擇器 選擇器權重 這裡的 權 和是數學中加權平均數的 權 乙個意思。當同時多個css選擇器語句的目標是同乙個html元素時,選擇器權重就派上...