css權(quán)重

lyning 發(fā)布于2019-08-30 15:55 / 2914人閱讀

摘要：什么是權(quán)重大基礎(chǔ)選擇器權(quán)重指的是大基礎(chǔ)選擇符的優(yōu)先級，優(yōu)先級高的樣式會覆蓋優(yōu)先級底的樣式，優(yōu)先級越高說明權(quán)重越高，反之亦然。

1、什么是css權(quán)重？css6大基礎(chǔ)選擇器

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

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

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

2、css權(quán)重計算規(guī)則

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

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

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

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

云服務(wù)器 GPU云服務(wù)器權(quán)重域名低權(quán)重解析權(quán)重權(quán)重

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117205.html

相關(guān)文章

CSS的低權(quán)重原則—避免濫用子選擇器

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

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

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

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

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

SimonMa 2019-08-29 17:18 評論0 收藏0
CSS優(yōu)先級的及其衡量標(biāo)準(zhǔn)CSS權(quán)重

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

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

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

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

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

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