CSS 選擇器 權重值計算

2021-09-22 01:44:07 字數 1434 閱讀 3639

吠犬不咬人;愛叫的狗很少咬人;善吠的狗很少咬人;

今天給大家分享乙個選擇器的一些知識

!important >1000

內聯樣式 =1000

id選擇器 =100

類,偽類 =10

元素選擇器 =1

* 選擇器 =0

繼承的樣式 無

規則:1.權值一樣,就近原則,遇到上面那個第2個問題的話,就是群組選擇器,各算個的。

2.當乙個選擇器中含有多個選擇器時,需要將所有的選擇器權值進行相加,然後進行比較,權值大的優先顯示。

注意:

1.選擇器的權值計算不會超過其最大數量級,一萬個 #id 都不會超過1000,因為id是100,最大不能超過百位數,就是不能達到1000

2.群組選擇器的權值單獨計算,不會相加。

3.樣式後面加上 !important 該樣式會獲取最高優先順序

內聯樣式不能新增!important

4.權重值相等的時候就使用就近原則

這個網頁綠的發紫哈!

下面是**,可以在瀏覽器瀏覽,嗯對!

please move your mouse on this div~,thank you!

......

< div>

< div>

< p id="demo">

演示文稿< span>

演示文稿< /span>

演示文稿< /div>

...

2.或者說

div div #demo span

div .p span

這個span元素是什麼顏色?只前學的那個就近原則,那麼你認為span是不是就是藍色?那麼!important呢?

3.權值:計算權值

規則:1.權值一樣,就近原則,遇到上面那個第2個問題的話,就是群組選擇器,各算個的。

2.當乙個選擇器中含有多個選擇器時,需要將所有的選擇器權值進行相加,然後進行比較,權值大的優先顯示。

注意:1.選擇器的權值計算不會超過其最大數量級,一萬個 #id 都不會超過1000,因為id是100,最大不能超過百位數,就是不能達到1000

2.群組選擇器的權值單獨計算,不會相加。

3.樣式後面加上 !important 該樣式會獲取最高優先順序

內聯樣式不能新增!important

4.權重值相等的時候就使用就近原則

答案:顏色是red 原因就是上面的那個選擇器權重值有 id,id是100,那麼權重值是100+1+1+1=113,第二行的選擇器權重值是10+10+1=21,113 > 21 ,那麼樣式應該是113的那個,應該是red。

CSS選擇器權重計算

css各種選擇器的權重 1.id選擇器 100 2.類 屬性 偽類選擇器 10 3.元素 偽元素選擇器 1 4.其他選擇器 0 如果有兩個css樣式都作用於某元素,如 id link a href id 100 link 10 a 1 href 0 111 id link.active id 100...

css選擇器 權重

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

CSS中選擇器的權重值

css 具有自己的優先順序計算方法,而不僅僅是行間 內部 外部 id class 元素 選擇器 栗子id id class.class 標籤p 屬性 type text 偽類 hover 偽元素 first line 相鄰選擇器 子代選擇器 內聯樣式,如 style 權值為1000。id選擇器,如 ...