css權重

lyning 發布于2019-08-30 15:55 / 2883人閱讀

摘要：什么是權重大基礎選擇器權重指的是大基礎選擇符的優先級，優先級高的樣式會覆蓋優先級底的樣式，優先級越高說明權重越高，反之亦然。

1、什么是css權重？css6大基礎選擇器

css權重指的是css6大基礎選擇符的優先級，優先級高的css樣式會覆蓋優先級底的css樣式，優先級越高說明權重越高，反之亦然。

css6大基礎選擇器：

a）、id選擇器(#box{})
b）、類選擇器(.box{})
c）、屬性選擇器(a[])
d）、偽類和偽對象選擇器(:hoevr{}和::after{})
e）、標簽類型選擇器(div{})
f）、通配符選擇器(*{})

2、css權重計算規則

計算css權重是有一定規則的，根據w3c制定的css規范，css權重計算規則如下：

a）、計算選擇符中的id選擇器的數量
    一個id選擇器為一個a，一個a為100
    
b）、計算選擇符中的類選擇器、屬性選擇器以及偽類選擇器的數量
    一個類選擇器、屬性選擇器以及偽類選擇器為一個b，一個b為10
    
c）、計算標簽類型選擇器和偽對象選擇器的數量
    一個標簽類型選擇器、偽對象選擇器為一個c，一個c為1
    
d）、忽略通配符選擇器
    通配符選擇器忽略不計

如下面這張圖就是一個css選擇器權重的例子：

如果兩個選擇符的權重相同，則可依照”就進原則”來判斷，最后定義的選擇符會被采用。但盡量避免出現這種依靠定義的順序決定選擇符優先級的情況，因為在后續的維護中很難保證定義的順序不會被打亂。

云服務器 GPU云服務器權重域名低權重解析權重權重

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

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

CSS的低權重原則—避免濫用子選擇器

摘要：使用子選擇器，會增加選擇符的權重，的選擇符權重越高，樣式越不易被覆蓋，所以除非確定結構非常穩定，一定不會再修改了，否則盡量使用子選擇器。在進過大量實踐后，我并不認為多有太大的壞處，相反，與使用子選擇器相比，新添加反而跟利于維護。 CSS設置的樣式是可以層疊的，如下面[代碼1][代碼1] span{font-size: 40px;} .test{color:red;} ...

vslam 2019-08-30 12:57 評論0 收藏0
你對CSS權重真的足夠了解嗎？

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

xioqua 2019-08-29 15:27 評論0 收藏0
前端雜談: CSS 權重 (Specificity)

摘要：前端雜談權重權重想必大家都聽說過一些簡單的規則大部分人也都知道較長的權重會大于較短的權重高于但是具體規范是什么瀏覽器是按照什么標準來判定不同選擇器的權重的呢讓我們來看一下官方文檔是怎么說的第一個關鍵詞官方文檔中用特異性來表示一個和其元素的相前端雜談: CSS 權重 (Specificity) css 權重想必大家都聽說過, 一些簡單的規則大部分人也都知道: 較長的 css sele...

SimonMa 2019-08-29 17:18 評論0 收藏0
CSS優先級的及其衡量標準CSS權重

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

ky0ncheng 2019-04-23 13:28 評論0 收藏0
link和@import的區別淺析

摘要：結論就結論而言，強烈建議使用標簽，慎用方式。這樣可以避免考慮的語法規則和注意事項，避免產生資源文件下載順序混亂和請求過多的煩惱。區別從屬關系區別是提供的語法規則，只有導入樣式表的作用是提供的標簽，不僅可以加載文件，還可以定義連接屬性等。我們都知道，外部引入 CSS 有2種方式，link標簽和@import。它們有何本質區別，有何使用建議，在考察外部引入 CSS 這部分內容時，經常被提...

YFan 2019-08-29 16:19 評論0 收藏0
link和@import的區別淺析

摘要：結論就結論而言，強烈建議使用標簽，慎用方式。這樣可以避免考慮的語法規則和注意事項，避免產生資源文件下載順序混亂和請求過多的煩惱。區別從屬關系區別是提供的語法規則，只有導入樣式表的作用是提供的標簽，不僅可以加載文件，還可以定義連接屬性等。我們都知道，外部引入 CSS 有2種方式，link標簽和@import。它們有何本質區別，有何使用建議，在考察外部引入 CSS 這部分內容時，經常被提...

cgh1999520 2019-08-23 10:53 評論0 收藏0