CSS補充篇 css選擇器權重計算問題

在開發過程中，編寫css樣式時，會有css屬性和選擇器的優先順序問題。因此我們需要了解內部結構和原理才能達到自己想要的效果。

首先你需要了解每個選擇器的權重值是多少，如果您不知道，下方鏈結跳轉到另外一篇部落格中，尋找到選擇器權重表進行檢視

css基礎篇選擇器權重

就單論css權重這個知識點，據說有很多在大廠裡面的前端工程師都有些人不知道這個知識點，所以學到就是賺到，下面就讓我舉幾個例子帶大家感受一下權重的重要性吧！

權重計算的特點：只要寫在同行的選擇器，只要將每個選擇器的權重值相加即可

例1：

html檔案**如下所示

class

="classdiv"
id="iddiv"
>
class
="classp"
id="idp"
>
1p>
div>

css檔案**如下所示

//100 + 1=101

#iddiv p
// 10 + 10=20
.classdiv .classp

**執行結果為紅色

html檔案**如下所示

class

="classdiv"
id="iddiv"
>
class
="classp"
id="idp"
>
1p>
div>

css檔案**如下所示

//100 + 1=101

#iddiv p
//1 + 10 + 100=111
div .classp #idp

**執行結果為綠色

html檔案**如下所示

class

="classdiv"
id="iddiv"
>
class
="classp"
id="idp"
>
1p>
div>

css檔案**如下所示

//100 + 1   +10   =111

#iddiv p .classsp
//1 + 10 + 100=111
div .classp #idp

**執行結果為綠色

兩者權重相同，後面的**會覆蓋前面的**，因此結果也是綠色

html檔案**如下所示

class

="classdiv"
id="iddiv"
>
class
="classp"
id="idp"
>
1p>
div>

css檔案**如下所示

//1 + infinity

div#iddiv p .classsp
//infinity
div .classp #idp

**執行結果為紅色

這裡還有其他內容哦！

html基礎篇

css基礎篇

技巧篇 css選擇器權重計算

import 行內樣式 id選擇器 class選擇器 標籤選擇器 通配選擇器 如何正確理解優先順序關係 共分為4個等級在簡單的按照比例關係能夠處理常用的選擇權重問題 第一等 代表內聯樣式，如 style 權值為1000。第二等 代表id選擇器，如 content，權值為100。第三等 代表類，偽類和...

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 選擇器權重計算規則

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