CSS選擇器的權重和計算規則(機制)

2021-10-01 17:04:26 字數 830 閱讀 7392

從css**存放位置看權重優先順序:內嵌樣式 > 內部樣式表 > 外聯樣式表。

從樣式選擇器看權重優先順序:important > 內嵌樣式 > id > 類 > 標籤 | 偽類 | 屬性選擇 > 偽元素 > 繼承 > 萬用字元。

css權重是由四個數值決定:

第一等:代表內聯樣式,如: style=」」,權值為1000。

第二等:代表id選擇器,如:#content,權值為100。

第三等:代表類、偽類和屬性選擇器,如.content,:hover,[type="text"],權值為10。

第四等:代表標籤選擇器和偽元素選擇器,如div p,::before,權值為1。

通配選擇符(universal selector)(*關係選擇符(combinators)(+,>,~, '',||)和否定偽類(negation pseudo-class)(:not())對優先順序沒有影響(但是,在:not()內部宣告的選擇器會影響優先順序)。

最後把這些值加起來,再就是當前元素的權重了。

權重算出來了,但是某個元素到底用哪個樣式,還有3個規則:

1,如果樣式上加有!important標記,那麼始終採用這個標記的樣式;

2、匹配的內容按照css權重排序,權重大的優先;

3,如果權重也一樣,按照它在css樣式表裡宣告的順序,後宣告的優先。

CSS 選擇器權重計算規則

下面從網易 規範中摘抄的內容,學習他們確定選擇器等級的方式。最近看了 精通css 這部分內容應該是從2.3節摘抄來的。選擇器等級 a 行內樣式style。b id選擇器的數量。c 類 偽類和屬性選擇器的數量。d 型別選擇器和偽元素選擇器的數量。選擇器等級 a,b,c,d style 1,0,0,0 ...

CSS 選擇器權重計算規則

其實,css有自己的優先順序計算公式,而不僅僅是行間 內部 外部樣式 id class 元素。一 樣式型別 1 行間 2 內聯 3 外部 二 選擇器型別 1 id id 2 class class 3 標籤 p 4 通用 5 屬性 type text 6 偽類 hover 7 偽元素 first l...

CSS 選擇器 權重值計算

吠犬不咬人 愛叫的狗很少咬人 善吠的狗很少咬人 今天給大家分享乙個選擇器的一些知識 important 1000 內聯樣式 1000 id選擇器 100 類,偽類 10 元素選擇器 1 選擇器 0 繼承的樣式 無 規則 1.權值一樣,就近原則,遇到上面那個第2個問題的話,就是群組選擇器,各算個的。2...