CSS中選擇器的權重值

BlackHole1 發布于2019-08-29 14:17 / 2169人閱讀

摘要：內聯樣式外部樣式選擇器類型選擇器栗子標簽屬性偽類偽元素相鄰選擇器子代選擇器權重計算規則內聯樣式，如，權值為。選擇器，如，權值為。之所以有這樣的錯覺，是因為確實行間為第一等的權重，所以它的權重是最高的。通配符子選擇器相鄰選擇器等的。

CSS 具有自己的優先級計算方法，而不僅僅是行間>內部>外部、ID>class>元素

1. 樣式類型

行間樣式

我的行間CSS樣式。

內聯樣式

外部樣式

2. 選擇器類型

選擇器	栗子
ID	#id
class	.class
標簽	p
屬性	[type="text"]
偽類	:hover
偽元素	::first-line
相鄰選擇器、子代選擇器	> +

3. 權重計算規則

內聯樣式，如: style="..."，權值為1000。

ID選擇器，如：#content，權值為0100。

類，偽類、屬性選擇器，如.content，權值為0010。

類型選擇器、偽元素選擇器，如div p，權值為0001。

通配符、子選擇器、相鄰選擇器等。如* > +，權值為0000。

繼承的樣式沒有權值

4. 比較規則

1,0,0,0 > 0,99,99,99。也就是說從左往右逐個等級比較，前一等級相等才往后比。

無論是行間、內部和外部樣式，都是按照這個規則來進行比較。而不是直觀的行間>內部>外部樣式；ID>class>元素。之所以有這樣的錯覺，是因為確實行間為第一等的權重，所以它的權重是最高的。而內部樣式可能一般寫在了外部樣式引用了之后，所以覆蓋掉了之前的。

在權重相同的情況下，后面的樣式會覆蓋掉前面的樣式。

通配符、子選擇器、相鄰選擇器等的。雖然權值為0000，但是也比繼承的樣式優先，0 權值比無權值優先。

5. !important

!important 的作用是提升優先級，換句話說。加了這句的樣式的優先級是最高的（比內聯樣式的優先級還高)。

我顯示紅色

ie7+和別的瀏覽器對important的這種作用的支持度都很好。只有ie6-有些bug

p{
  color:red !important;
  color:blue;    
}        //會顯示blue

但是這并不說明ie6不支持important，只是支持上有些bug。

p{color:red !important;  }
p{color:blue;}        // 這樣就會顯示的是red。說明ie6還是支持important的

當 !important 規則被應用在一個樣式聲明中時,該樣式聲明會覆蓋CSS中任何其他的聲明，無論它處在聲明列表中的哪個位置。盡管如此，!important 規則還是與優先級毫無關系。使用 !important 不是一個好習慣，因為它改變了你樣式表本來的級聯規則，從而難以調試。
在使用 !important 時需要注意：

Never 永遠不要在全站范圍的 css 上使用 !important

Only 只在需要覆蓋全站或外部 css（例如引用的 ExtJs 或者YUI ）的特定頁面中使用 !important

Never 永遠不要在你的插件中使用 !important

Always 要優化考慮使用樣式規則的優先級來解決問題而不是 !important

網上的帖子大多深淺不一，甚至有些前后矛盾，在下的文章都是學習過程中的總結，如果發現錯誤，歡迎留言指出~

參考：

CSS 選擇器權重計算規則

MDN 優先級是如何計算的？

PS：歡迎大家關注我的公眾號【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，長按識別下面二維碼即可加我好友，備注加群，我拉你入群～

GPU云服務器云服務器獲取CSS屬性值 php 獲取css值選擇值已選擇值

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113038.html

CSS優先級的及其衡量標準CSS權重

摘要：優先級是由權重來作為衡量標準的，權重的計算有一套計算公式，有如下規范使用一個位數的字串來表示級別，從左到右，左邊的做大，往右依次遞減，且數位之間沒有進制，級別之間不可逾越。定義了一個命令，該命令被賦予最大的優先級。一、背景 CSS有三大特性：層疊性、繼承性、優先級。而我們在給CSS定義樣式的時候，經常出現兩個及以上的規則應用在同一元素上，單該元素最終在瀏覽器呈現的效果是應用的哪個規則呢？這...

ky0ncheng 2019-04-23 13:28 評論0 收藏0
[譯]HTML&CSS Lesson3: 了解CSS

摘要：我們會在組合選擇器中來了解為什么權重值要加連字符。組合選擇器中的權重值會分別對不同類型的選擇器進行計數。對比兩組選擇器，第二組選擇器有兩個選擇器，擁有更高的權重值。 CSS是一門復雜的語言，擁有相當的大能力。它我們允許為頁面添加布局和設計，允許多個元素甚至多個頁面共享樣式。在我們有能力解鎖所有功能之前，我們必須先充分理解它的基礎點。首先，我們要明確的了解樣式是怎么被渲染的。具體的...

lavnFan 2019-08-01 17:17 評論0 收藏0
[譯]HTML&CSS Lesson3: 了解CSS

摘要：我們會在組合選擇器中來了解為什么權重值要加連字符。組合選擇器中的權重值會分別對不同類型的選擇器進行計數。對比兩組選擇器，第二組選擇器有兩個選擇器，擁有更高的權重值。 CSS是一門復雜的語言，擁有相當的大能力。它我們允許為頁面添加布局和設計，允許多個元素甚至多個頁面共享樣式。在我們有能力解鎖所有功能之前，我們必須先充分理解它的基礎點。首先，我們要明確的了解樣式是怎么被渲染的。具體的...

soasme 2019-08-29 13:04 評論0 收藏0
你對CSS權重真的足夠了解嗎？

摘要：如果兩個權重不同的選擇器作用在同一元素上，權重值高的規則生效選擇器可能會包含一個或者多個與權重相關的計算點，若經過權重值計算得到的權重值越大，則認為這個選擇器的權重高。前言 css權重很多人都聽過，也了解一些，但是很多人對具體的規則或者說再深如一些關于css權重的問題，可能會不那么清楚。日常開發中，或多或少都會遇到css規則不生效的問題，為了讓我們能夠減少調試css規則的時間，深刻理...

xioqua 2019-08-29 15:27 評論0 收藏0
20180224-css選擇器的權重

摘要：選擇器的權重第一種情況樣式表中只有單一樣式即內聯元素第二種情況組合選擇器從左往右逐個比較，按進行比較越大權重越高。 css選擇器的權重showImg(https://segmentfault.com/img/bV4dpB?w=542&h=376); 1第一種情況：樣式表中只有單一樣式：即內聯>id>class>元素 #id{} .class{} p{} 2第二種情況：組合選擇器...

鄒強 2019-08-30 14:01 評論0 收藏0