CSS 權(quán)重詳解

于 CSSer 來(lái)說(shuō)，多多少少都會(huì)遇到過(guò) “樣式規(guī)則不生效？”、“樣式規(guī)則被覆蓋？” 等等問(wèn)題，這些都與 CSS 權(quán)重有關(guān)系。

我自己是一名從事了多年開(kāi)發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取

選擇器匹配原理

在此之前，容我先簡(jiǎn)單介紹瀏覽器是怎么通過(guò)各種選擇器，把樣式規(guī)則和 DOM 元素扯上關(guān)系的。

瀏覽器中存在著專(zhuān)門(mén)的渲染引擎來(lái)渲染 HTML 文檔。這里以 Webkit 內(nèi)核為例，在啟動(dòng)渲染流程時(shí)，引擎一方面會(huì)解析 HTML 文檔，構(gòu)建 DOM 節(jié)點(diǎn)樹(shù)（DOM Tree），另一方面會(huì)解析樣式文件生成 樣式規(guī)則（Style Rules），然后結(jié)合分析 DOM 樹(shù)和樣式規(guī)則生成 渲染樹(shù)（Render Tree），最后布局和繪制出 UI 界面。

Webkit 渲染流程（摘自 https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/）

CSS 的選擇器匹配就發(fā)生在 渲染樹(shù) 的構(gòu)建過(guò)程。瀏覽器會(huì)從 DOM 樹(shù)的根節(jié)點(diǎn)開(kāi)始遍歷每個(gè)可見(jiàn)節(jié)點(diǎn)，對(duì)于每個(gè)可見(jiàn)節(jié)點(diǎn)都會(huì)在規(guī)則表中查找適配的樣式規(guī)則。那么，如此龐大的樣式數(shù)據(jù)和復(fù)雜的選擇器結(jié)構(gòu)，渲染引擎是怎么尋找到適配當(dāng)前元素的樣式規(guī)則呢？

請(qǐng)看下面這個(gè)復(fù)合選擇器。如果引擎是按照從左向右的順序匹配選擇器，將會(huì)導(dǎo)致大量回溯的發(fā)生：先是在當(dāng)前節(jié)點(diǎn)到 DOM 樹(shù)跟節(jié)點(diǎn)的路徑上尋找 div 元素，然后沿著分支路徑繼續(xù)往下找第二個(gè) div 元素，如果當(dāng)前路徑找不到，就得回退到上一個(gè) div 元素嘗試另一條分支路徑。如此往復(fù)，對(duì)性能損耗將會(huì)非常嚴(yán)重。

div div span .text {}

所以，引擎是采取 從右向左 的順序來(lái)匹配選擇器。也就是 從最具體的選擇器開(kāi)始，如果與當(dāng)前節(jié)點(diǎn)不匹配，則直接拋棄該條規(guī)則；如果匹配，只需要沿著路徑往上確認(rèn)其他選擇器是否也匹配，這樣做可以大大減少無(wú)效的匹配數(shù)，提高性能。除此之外，引擎還會(huì)把不同類(lèi)型的選擇器（id、class、tag 及其他類(lèi)型）歸類(lèi)到哈希表中，進(jìn)一步減少查找基數(shù)。

了解選擇器的匹配原理，有利于我們理解其權(quán)重規(guī)則，對(duì)于編寫(xiě)簡(jiǎn)潔、高效的 CSS 代碼非常有幫助。

CSS 權(quán)重

通過(guò)不同的方式（內(nèi)聯(lián)樣式、外部樣式表）、不同類(lèi)型的選擇器組合針對(duì)某個(gè)元素聲明樣式規(guī)則時(shí)，如何決定最終哪個(gè)聲明會(huì)被應(yīng)用到元素上？這就涉及到 CSS 權(quán)重（也指優(yōu)先級(jí)，Specificity）。

圍繞 CSS 權(quán)重主要有以下三條規(guī)則：

權(quán)重不同的樣式規(guī)則作用于同一元素時(shí)，權(quán)重高的規(guī)則生效；
權(quán)重相同的樣式規(guī)則作用于同一元素時(shí)，后聲明的規(guī)則生效；
選擇器在 DOM 中的位置關(guān)系不會(huì)對(duì)規(guī)則產(chǎn)生影響。

<html>
 <head>
 <style>
 body div {
 color: red;
 }
 html div {
 color: blue;
 }
 </style>
 </head>
 <body>
 <div>測(cè)試</div>
 </body>
<html>

這里的 body 標(biāo)簽元素在 DOM 中離目標(biāo) div 更近，但最后還是按照樣式規(guī)則的聲明順序來(lái)決定。
直接作用于元素的樣式規(guī)則優(yōu)先級(jí)高于從祖先元素繼承的規(guī)則；

<html>
 <head>
 <style>
 #parent {
 color: red;
 }
 span {
 color: blue;
 }
 </style>
 </head>
 <body>
 <div id="parent">
 <span>測(cè)試</span>
 </div>
 </body>
<html>

CSS 權(quán)重等級(jí)

如何比較不同選擇器的權(quán)重高低？這里劃分成 5 個(gè)權(quán)重等級(jí)，按照等級(jí) 由高到低 的順序：

!important 關(guān)鍵字
內(nèi)聯(lián)樣式

<div style="color: #fff;">測(cè)試</div>

id 選擇器

#demo {}

類(lèi)選擇器、屬性選擇器、偽類(lèi)選擇器

.demo {}
[type="text"] {}
div:hover {}
div:first-child {}

需要注意，否定偽類(lèi)（:not()）比較特殊，它不會(huì)對(duì)權(quán)重產(chǎn)生影響，但是 否定偽類(lèi)內(nèi)部的選擇器會(huì)影響權(quán)重。

<html>
 <head>
 <style>
 div#demo span {
 color: red;
 }
 div:not(#demo) span {
 color: blue;
 }
 </style>
 </head>
 <body>
 <div id="demo">
 <span>普通 demo</span>
 <div id="pseudo">
 <span>否定偽類(lèi) demo</span>
 </div>
 </div>
 </body>
<html>

實(shí)例中，:not(#demo) 的權(quán)重值和 #demo 的權(quán)重值是相等的，所以后面聲明的樣式規(guī)則成功生效。
標(biāo)簽選擇器、偽元素選擇器

div {}
div:before {}
div:after {}

除了上述的選擇器之外，通配符選擇器（*） 和 結(jié)合符（+、>、~）對(duì)優(yōu)先級(jí)沒(méi)有影響。

對(duì)于復(fù)雜的復(fù)合選擇器，我們需要逐個(gè)等級(jí)比較權(quán)重大小，不允許跨越等級(jí)比較。為了方便計(jì)算，我們可以把權(quán)重值具象化，每出現(xiàn)一個(gè)選擇器就在其對(duì)應(yīng)的等級(jí)區(qū)間中權(quán)重值加 1，參考下面實(shí)例：

* {} /* 權(quán)重值 0-0-0-0-0 */
div {} /* 權(quán)重值 0-0-0-0-1 */
div h1+h2 {} /* 權(quán)重值 0-0-0-0-3 */
div, ... div {} /* 權(quán)重值 0-0-0-0-n */
#demo a:hover {} /* 權(quán)重值 0-0-1-1-1 */

國(guó)外大神把 CSS 權(quán)重的計(jì)算模擬成海洋生物鏈，選擇器組合權(quán)重越大則在生物鏈位置越高，非常淺顯生動(dòng)，建議收藏。

圖片轉(zhuǎn)自 https://specifishity.com/

建議

在充分了解 CSS 選擇器匹配原理和權(quán)重規(guī)則之后，在編寫(xiě) CSS 代碼時(shí)不妨多注意以下細(xì)節(jié)：

盡量不要使用 !important，尤其是在 對(duì)外提供的插件 和 全站范圍的樣式表 中，這會(huì)對(duì)模塊代碼中的樣式覆蓋帶來(lái)非常大的麻煩。
!important 關(guān)鍵字的權(quán)重值為 1-0-0-0-0，只需要按照權(quán)重規(guī)則繼續(xù)累加權(quán)重值即可覆蓋該樣式屬性。

<html>
 <head>
 <style>
 div {
 color: red !important;
 }
 /* 通過(guò) id選擇器 增加權(quán)重 */
 #demo {
 color: blue !important;
 }
 </style>
 </head>
 <body>
 <div id="demo">測(cè)試</div>
 </body>
<html>

減少不必要的選擇器嵌套，嵌套最好不要超過(guò)三級(jí)。大量的復(fù)合選擇器，會(huì)影響選擇器匹配的效率，同時(shí)也會(huì)增加 CSS 樣式文件的體積，不易維護(hù)。

當(dāng)出現(xiàn)大量嵌套時(shí)，我們可以指定一個(gè)更具體的類(lèi)選擇器來(lái)替換復(fù)合選擇器。

lt;img src="http://m.jungjaehyung.com/uploadfile/2024/0806/20240806110853564.jpg" data-caption="" data-size="normal" data-rawwidth="711" data-rawheight="230" data-default-watermark-src="http://m.jungjaehyung.com/uploadfile/2024/0806/20240806110855421.jpg" class="origin_image zh-lightbox-thumb" width="711" data-original="https://pic2.zhimg.com/v2-1a61d5196d8d77ff8fa263e9d34ee50d_r.jpg"/>

Unlike a programming language that requires knowledge of loops, variables, and other concepts, CSS is pretty easy to pick up. Maybe it’s because of this that it has gained the reputation of being simple. It is simple in the sense of “not complex”, but that doesn’t mean it’s easy.Mistaking “simple” for “easy” will only lead to heartache. -- by @Jeremy Keith

這就是為什么寫(xiě)得好CSS不多見(jiàn)。

而對(duì)于Web頁(yè)面和Web應(yīng)用而言，他的構(gòu)層主要由HTML、CSS和JavaScript。其中HTML和CSS的關(guān)系又是緊密相連：

簡(jiǎn)單地說(shuō)：

HTML的DOM樹(shù)會(huì)直接影響你CSS選擇器的使用
HTML的元素命名也會(huì)直接影響你CSS選擇器的使用

那么首要解決的問(wèn)題就是寫(xiě)好HTML結(jié)構(gòu)，寫(xiě)好HTML結(jié)構(gòu)，寫(xiě)好HTML結(jié)構(gòu)；定義好的類(lèi)名，定義好的類(lèi)名，定義好的類(lèi)名。

怎么做到呢？徒手?jǐn)]出類(lèi)似Bootstrap的HTML：

比如寫(xiě)個(gè)Button:

就我個(gè)人而言，HTML結(jié)構(gòu)都喜歡寫(xiě)成Bootstrap這種。

Bootstrap?

getbootstrap.com

另外就是在寫(xiě)組件或者HTML結(jié)構(gòu)時(shí)還可以參照 "Accessible Rich Internet Applications "規(guī)范中的Widget部分：

Accessible Rich Internet Applications (WAI-ARIA) 1.1?

www.w3.org

另外，還可以參考一些優(yōu)秀的網(wǎng)站，F(xiàn)rameworks,庫(kù)。這樣可以提高自己在HTML方面的能力，比如結(jié)構(gòu)的管理，類(lèi)名命名。更多的話可以閱讀一些關(guān)于HTML語(yǔ)義化的文章。

回到CSS上來(lái)。很多擼CSS的同學(xué)常常會(huì)犯的問(wèn)題：

選擇器運(yùn)用不好
屬性了解不夠到位
不夠成體系
實(shí)現(xiàn)思路不好
眼界不廣
不知道借助工具
等等

選擇器運(yùn)用不好

選擇器的使用在CSS中絕對(duì)算是重中之重。CSS發(fā)展到目前為止，選擇器已經(jīng)非常的成熟了，可以實(shí)現(xiàn)很多類(lèi)似于早期jQuery的選擇器功能。

如果前期的HTML寫(xiě)的足夠好，在選擇器定位到目標(biāo)元素時(shí)就會(huì)變得較為輕松，而且可讀性也會(huì)較強(qiáng)。很同學(xué)用不好選擇器，除了不知道怎么用之外，還有一個(gè)更重要的原因，選擇器權(quán)重不理解。

所以說(shuō)，要用好選擇器，就需要知道 CSS選擇器是怎么一回事，CSS選擇器權(quán)重如何計(jì)算

有關(guān)于選擇器相關(guān)的教程網(wǎng)上也很多，這里列幾篇：

CSS3 選擇器--基本選擇器_css3選擇器, 基本選擇器, CSS選擇器教程_w3cplus?

www.w3cplus.com

CSS3 選擇器--屬性選擇器_css3選擇器, 屬性選擇器, CSS選擇器教程_w3cplus?

www.w3cplus.com

CSS3 選擇器--偽類(lèi)選擇器_css3選擇器, 偽類(lèi)選擇器, CSS選擇器教程_w3cplus?

www.w3cplus.com

CSS選擇器的優(yōu)化_基本選擇器, CSS選擇器教程_w3cplus?

www.w3cplus.com

再聊CSS的屬性選擇器_CSS, CSS選擇器教程_w3cplus?

www.w3cplus.com

初探CSS 選擇器Level 4?

www.w3cplus.com

你應(yīng)該知道的一些事情--CSS權(quán)重_CSS選擇器教程_w3cplus?

www.w3cplus.com

使用CSS Mod Queries控制選擇器范圍?

www.w3cplus.com

屬性了解不到位

CSS的屬性事實(shí)上并不是非常的復(fù)雜，但他們的組合就會(huì)讓很多人感到頭痛了。如果希望不頭痛就需要對(duì)CSS的屬性有所了解。建議可以從相關(guān)規(guī)范中獲取：

All Standards and Drafts?

www.w3.org

而CSS中較為重要的幾個(gè)功能模塊：

選擇器模塊：

Selectors Level 4?

www.w3.org

盒模型

CSS Box Model Module Level 3?

www.w3.org

特別是邏輯盒模型的出現(xiàn)，將會(huì)讓很多CSSer更為頭痛，拿下圖來(lái)對(duì)比一下：

CSS的邏輯屬性對(duì)盒模型帶來(lái)的變化_CSS, CSS邏輯屬性教程_w3cplus?

www.w3cplus.com

布局模塊：

CSS Flexible Box Layout Module Level 1?

www.w3.org

CSS Inline Layout Module Level 3?

www.w3.org

CSS Grid Layout Module Level 2?

www.w3.org

CSS Multi-column Layout Module Level 1?

www.w3.org

CSS Layout API Level 1?

www.w3.org

Layout_入門(mén) 精通教程_w3cplus?

www.w3cplus.com

值、單位和顏色

CSS Values and Units Module Level 4?

www.w3.org

CSS Values and Units Module Level 3?

www.w3.org

CSS Color Module Level 3?

www.w3.org

圖解CSS：CSS 的值和單位_CSS, 圖解CSS, 長(zhǎng)度單位教程_w3cplus?

www.w3cplus.com

定位

CSS Positioned Layout Module Level 3?

www.w3.org

position_入門(mén) 精通教程_w3cplus?

www.w3cplus.com

層疊和繼承

圖解CSS：CSS層疊和繼承_CSS, 圖解CSS 教程_w3cplus?

www.w3cplus.com

聊聊CSS中的層疊相關(guān)概念_CSS, z-index, BFC 教程_w3cplus?

www.w3cplus.com

transform/transition/animation相關(guān)的

CSS Transforms Module Level 1?

www.w3.org

CSS Transitions?

www.w3.org

CSS Animations Level 1?

www.w3.org

https://www.w3cplus.com/blog/tags/95.html?

www.w3cplus.com

transition_入門(mén) 精通教程_w3cplus?

www.w3cplus.com

Web動(dòng)畫(huà)_入門(mén) 精通教程_w3cplus?

www.w3cplus.com

另外還有比較新的，比如：

CSS混合模式和濾鏡
CSS繪制圖形
CSS自定義屬性
不一一列出

看到這些，估計(jì)為什么寫(xiě)不出好的CSS有一定的原因所在了。剛才也說(shuō)過(guò)，同樣一個(gè)效果，可能會(huì)有N種組合方式，甚至同一個(gè)人在不同時(shí)間寫(xiě)同一個(gè)效果都會(huì)有N種組合方式。因?yàn)镃SS就是一種七巧板

不夠成體系

其實(shí)寫(xiě)CSS還是有很多方法論的，比如有名的：

OOCSS

SMACSS

Atomic Design

除了前面提到的，還有其他的類(lèi)似方法，比如BEM、SUITCSS、MCSS、AMCSS等。

借助這些優(yōu)秀的方法論，可以讓你的CSS變得更優(yōu)雅些：

CSS架構(gòu)_入門(mén) 精通教程_w3cplus?

www.w3cplus.com

借助工具來(lái)幫你

到目前為止，寫(xiě)CSS不僅僅局限于CSS，可以使用一些CSS處理器或其他的工具來(lái)幫更簡(jiǎn)單的寫(xiě)CSS。

平時(shí)也可以收集一些幫你擼碼的利器

tools_入門(mén) 精通教程_w3cplus?

www.w3cplus.com

眼界不夠高

眼界不夠高，看得少。這方面很簡(jiǎn)單，自己多看，多寫(xiě)。比如Codepen就是一個(gè)很好的地方：

今天就寫(xiě)到這，感覺(jué)好長(zhǎng)了.....

最后放上早期的一篇分享：

寫(xiě)CSS的姿勢(shì)_CSS 教程_w3cplus?

www.w3cplus.com

再給CSSer推薦學(xué)習(xí)CSS的好去處：

CSS-Tricks?

css-tricks.com

CSS3_入門(mén) 精通教程_w3cplus?

www.w3cplus.com

張?chǎng)涡?鑫空間-鑫生活?

www.zhangxinxu.com

ChokCoco - 博客園?

www.cnblogs.com

另外推薦幾本CSS的書(shū)

學(xué)習(xí)從來(lái)不是一個(gè)人的事情，要有個(gè)相互監(jiān)督的伙伴，工作需要學(xué)習(xí)前端或者為了入行、轉(zhuǎn)行學(xué)習(xí)前端的伙伴可以私信回復(fù)小編“前端”領(lǐng)取全套免費(fèi)前端學(xué)習(xí)資料、視頻

EB前端現(xiàn)在是時(shí)下較火的編程語(yǔ)言之一，特別是對(duì)于自學(xué)來(lái)說(shuō)連css的一些權(quán)重都不是很了解，針對(duì)這種情況小猿圈web前端講師就講講css基礎(chǔ)入門(mén)之權(quán)重，希望對(duì)你的前端學(xué)習(xí)有一定的幫助。

一、css權(quán)重是什么?

css權(quán)重指的是css6大基礎(chǔ)選擇符的優(yōu)先級(jí)，優(yōu)先級(jí)高的css樣式會(huì)覆蓋優(yōu)先級(jí)底的css樣式，優(yōu)先級(jí)越高說(shuō)明權(quán)重越高，反之亦然。

css6大基礎(chǔ)選擇器：

a)、id選擇器(#box{})

b)、類(lèi)選擇器(.box{})

c)、屬性選擇器(a[href=http://www.xxx.com])

d)、偽類(lèi)和偽對(duì)象選擇器(:hoevr{}和::after{})

e)、標(biāo)簽類(lèi)型選擇器(div{})

f)、通配符選擇器(*{})

優(yōu)先級(jí)順序從大到小：

內(nèi)聯(lián)樣式 > ID 選擇器 > 類(lèi)選擇器 = 屬性選擇器 = 偽類(lèi)選擇器 > 元素(類(lèi)型)選擇器 = 偽元素選擇器

二、css權(quán)重計(jì)算規(guī)則

計(jì)算css權(quán)重是有一定規(guī)則的，根據(jù)w3c制定的css規(guī)范，css權(quán)重計(jì)算規(guī)則如下：

a)、計(jì)算選擇符中的id選擇器的數(shù)量一個(gè)id選擇器為一個(gè)a，一個(gè)a為100

b)、計(jì)算選擇符中的類(lèi)選擇器、屬性選擇器以及偽類(lèi)選擇器的數(shù)量一個(gè)類(lèi)選擇器、屬性選擇器以及偽類(lèi)選擇器為一個(gè)b，一個(gè)b為10

c)、計(jì)算標(biāo)簽類(lèi)型選擇器和偽對(duì)象選擇器的數(shù)量一個(gè)標(biāo)簽類(lèi)型選擇器、偽對(duì)象選擇器為一個(gè)c，一個(gè)c為1

d)、忽略通配符選擇器通配符選擇器忽略不計(jì)

如圖是一個(gè)css選擇器權(quán)重的例子：

如果兩個(gè)選擇符的權(quán)重相同，則可依照”就進(jìn)原則”來(lái)判斷，最后定義的選擇符會(huì)被采用。但盡量避免出現(xiàn)這種依靠定義的順序決定選擇符優(yōu)先級(jí)的情況，因?yàn)樵诤罄m(xù)的維護(hù)中很難保證定義的順序不會(huì)被打亂。

小猿圈web前端講師認(rèn)為：授之以魚(yú)更授之以漁，想要學(xué)好web前端首先需要就是端正自己的學(xué)習(xí)態(tài)度，明確學(xué)習(xí)目標(biāo)，這樣才能堅(jiān)持學(xué)習(xí)。想要了解更多關(guān)于前端方面的小伙伴，可以關(guān)注小猿圈每天的動(dòng)態(tài)，會(huì)不定期更新互聯(lián)網(wǎng)編程知識(shí)，希望對(duì)你的學(xué)習(xí)有一定的幫助。

在線咨詢

上一篇：CSS3 漸變（Gradients）大全-第一章
下一篇：釣魚(yú)騙局：通過(guò)偽造App Store支付鏈接誤導(dǎo)用戶

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

CSS 權(quán)重詳解

您的項(xiàng)目需求