選擇器優先順序

2022-07-16 23:21:21 字數 666 閱讀 5765

css優先順序:是由四個級別和各級別的出現次數決定的。

四個級別分別為:行內選擇符、id選擇符、類別選擇符、元素選擇符。

優先順序的演算法:

每個規則對應乙個初始"四位數":0、0、0、0

若是 行內選擇符,則加1、0、0、0

若是id選擇符,則加0、1、0、0

若是 類選擇符/屬性選擇符/偽類選擇符,則分別加0、0、1、0

若是 元素(標籤)選擇符/偽元素選擇符,則分別加0、0、0、1

演算法:將每條規則中,選擇符對應的數相加後得到的」四位數「,從左到右進行比較,大的優先順序越高。 

!important > 行內樣式》id選擇器 > 類選擇器 > 標籤 > 萬用字元 > 繼承 > 瀏覽器預設屬性

所謂高效就是讓瀏覽器查詢更少的元素標籤來確定匹配的style元素。

1.不要再id選擇器前使用標籤名

解釋:id選擇是唯一的,加上標籤名相當於畫蛇添足了,沒必要。

2.不要在類選擇器前使用標籤名

解釋:如果沒有相同的名字出現就是沒必要,但是如果存在多個相同名字的類選擇器則有必要新增標籤名防止混淆如(p.colclass 和 span.colclass

3.盡量少使用層級關係;

#divclass p.colclass改為  .colclass

4.使用類選擇器代替層級關係(如上)

選擇器優先順序 CSS選擇器優先順序總結

css選擇器優先順序這個問題,相信有點經驗前端都會認為非常簡單,但是我們今天還是來總結一下吧。相信大家應該很少直接在html頁面寫樣式吧,一般都是用link標籤匯入css樣式表。使用者自定義樣式表就是我們用link標籤引入的css樣式表,為了保持不同瀏覽器下樣式相同,所以我們的自定義樣式表一般都會覆...

選擇器,優先順序

內聯式css樣式表就是把css 直接寫在現有的html標籤中,如下面 這裡文字是紅色。盡量不要把css 寫成內部樣式 縮排統一。2.嵌入式css樣式,就是可以把css樣式 寫在標籤之間。3.外部式css樣式 也可稱為外聯式 就是把css 寫乙個單獨的外部檔案中,這個css樣式檔案以 css 注意 1...

CSS 選擇器優先順序

css優先順序包含四個級別 文內選擇器,id選擇器,class選擇器,元素選擇器 以及各級別出現的次數。根據這四個級別出現的次數計算得到css的優先順序。css優先順序的計算規則如下 頁面中直接設定style,加1,0,0,0 每個id選擇器 如 id 加0,1,0,0 每個class選擇器 如 c...