css權(quán)重是什么意思

這篇文章將為大家詳細(xì)講解有關(guān)css權(quán)重是什么意思，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

我們提供的服務(wù)有：做網(wǎng)站、成都網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、靖宇ssl等。為千余家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的靖宇網(wǎng)站制作公司

css權(quán)重指的是css選擇符的優(yōu)先級(jí)，優(yōu)先級(jí)高的css樣式會(huì)覆蓋優(yōu)先級(jí)底的css樣式，優(yōu)先級(jí)越高說(shuō)明權(quán)重越高，反之亦然。css權(quán)重基于設(shè)定的匹配規(guī)則，瀏覽器通過(guò)設(shè)定好的優(yōu)先級(jí)來(lái)判斷哪些屬性值DOM元素最為相關(guān)，從而在該DOM上應(yīng)用這些值。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css權(quán)重是什么

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

css權(quán)重基于設(shè)定的匹配規(guī)則，瀏覽器通過(guò)設(shè)定好的優(yōu)先級(jí)來(lái)判斷哪些屬性值DOM元素最為相關(guān)，從而在該DOM上應(yīng)用這些值。

簡(jiǎn)單理解就是一個(gè)DOM的某個(gè)屬性值有多個(gè)css樣式設(shè)置，優(yōu)先級(jí)高的那個(gè)應(yīng)用。很多css設(shè)置不生效的問(wèn)題，都是因?yàn)樵谀程幎x了一個(gè)更高的優(yōu)先級(jí)，從而導(dǎo)致該處樣式不生效。

優(yōu)先級(jí)的順序如下：

important > 內(nèi)聯(lián)(style) > ID > 類(lèi)(class) > 標(biāo)簽(li...) | 偽類(lèi)(:hover,:focus...) | 屬性選擇[attr=''] > 偽對(duì)象(:before,:after) > 通配符(*) > 繼承(inherit)

那么如何確定優(yōu)先級(jí)呢？

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)重的例子：

css權(quán)重是什么意思

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

優(yōu)先級(jí)的基本規(guī)則

1.相同的權(quán)重：以后面出現(xiàn)的選擇器為最后規(guī)則

假如在外部樣式表中，同一個(gè)CSS規(guī)則你寫(xiě)了兩次，那么出現(xiàn)在前面的選擇器權(quán)重低，你的樣式會(huì)選擇后面的樣式：

#content h2 {  padding: 5px;
}
#content h2 {  padding: 10px;
}

兩個(gè)選擇器的權(quán)重都是0，1，0，1，最后那個(gè)規(guī)則生效。

2.不同的權(quán)重，權(quán)重值高則生效

Id選擇器的優(yōu)先級(jí)比屬性選擇器高,比如下面的例子里樣式表中#p123的權(quán)重明顯比[id=p123]的權(quán)重要高。

a#a-02 { background-image : url(n.gif); }
a[id="a-02"] { background-image : url(n.png); }

3.就近原則

如我在樣式表中對(duì)DOM定義的樣式A,然后我又在html也對(duì)DOM定義了B,應(yīng)用B

.A {  padding: 5px;
}

<style type="text/css">
  .B {    padding: 10px;
  }
</style>

4.無(wú)論多少個(gè)元素組成的選擇器，都沒(méi)有一個(gè)class選擇器優(yōu)先級(jí)高。

就是上面的那個(gè)例外。

5.無(wú)視DOM樹(shù)的距離

如下樣式：

body h2 {  color: green;
}
html h2 {  color: purple;
}

當(dāng)它應(yīng)用在下面的HTML時(shí):

<html><body>
  <h2>Here is a title!</h2>
</body></html>

瀏覽器會(huì)將它渲染成purple;
實(shí)際上規(guī)則1也適用于此，不過(guò)由于其DOM負(fù)極標(biāo)簽的不同，故單拎出來(lái)特殊化。

6.:not 偽類(lèi)例外

:not 否定偽類(lèi)在優(yōu)先級(jí)計(jì)算中不會(huì)被看作是偽類(lèi). 事實(shí)上, 在計(jì)算選擇器數(shù)量時(shí)還是會(huì)把其中的選擇器當(dāng)做普通選擇器進(jìn)行計(jì)數(shù).

div.outer p {
  color:orange;
}
div:not(.outer) p { 
 color: lime;
}

當(dāng)它被應(yīng)用在下面的HTML時(shí),就是文字描述效果

<div class="outer">
  <p>orange</p>
  <div class="inner">
    <p>lime</p>
  </div>
</div>

7.!important 規(guī)則例外

當(dāng)在一個(gè)樣式聲明上使用 !important 規(guī)則時(shí)，該樣式聲明會(huì)覆蓋CSS中任何其他的聲明。

盡管技術(shù)上 !important 與優(yōu)先級(jí)毫無(wú)關(guān)系，但是它們之間直接相互影響。

使用 !important 是一個(gè)壞習(xí)慣，應(yīng)該盡量避免，因?yàn)檫@打斷了樣式表中的固有的級(jí)聯(lián)規(guī)則使得調(diào)試找bug變得更加困難了。

當(dāng)兩條相互沖突的帶有!important 規(guī)則的聲明被應(yīng)用到相同的元素上時(shí)，擁有更大優(yōu)先級(jí)的聲明將會(huì)被采用。

css的選擇器有哪些

css的選擇器可以分為三大類(lèi)，即id選擇器、class選擇器、標(biāo)簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類(lèi)選擇器、通用選擇器、群組選擇器等等

關(guān)于“css權(quán)重是什么意思”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

網(wǎng)頁(yè)題目：css權(quán)重是什么意思
URL標(biāo)題：http://jinyejixie.com/article28/pdcsjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、微信小程序、網(wǎng)站內(nèi)鏈、靜態(tài)網(wǎng)站、網(wǎng)站營(yíng)銷(xiāo)、ChatGPT

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

css權(quán)重是什么意思

css的選擇器有哪些