css權(quán)重有什么用

發(fā)布時(shí)間：2021-12-09 14:07:06 來(lái)源：億速云閱讀：185 作者：iii 欄目：web開(kāi)發(fā)

這篇文章主要講解了“css權(quán)重有什么用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“css權(quán)重有什么用”吧！

CSS權(quán)重指的是樣式的優(yōu)先級(jí)，決定了css規(guī)則怎樣被瀏覽器解析直到生效；當(dāng)兩條或多條樣式作用于一個(gè)元素時(shí)，權(quán)重高的那條樣式對(duì)元素起作用，而權(quán)重相同的，后寫(xiě)的樣式會(huì)覆蓋前面寫(xiě)的樣式。

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

CSS權(quán)重指的是樣式的優(yōu)先級(jí)，有兩條或多條樣式作用于一個(gè)元素，權(quán)重高的那條樣式對(duì)元素起作用，權(quán)重相同的，后寫(xiě)的樣式會(huì)覆蓋前面寫(xiě)的樣式。

權(quán)重決定了你css規(guī)則怎樣被瀏覽器解析直到生效?！癱ss權(quán)重關(guān)系到你的css規(guī)則是怎樣顯示的”。
當(dāng)很多的規(guī)則被應(yīng)用到某一個(gè)元素上時(shí)，權(quán)重是一個(gè)決定哪種規(guī)則生效，或者是優(yōu)先級(jí)的過(guò)程。
每個(gè)選擇器都有自己的權(quán)重。你的每條css規(guī)則，都包含一個(gè)權(quán)重級(jí)別。這個(gè)級(jí)別是由不同的選擇器加權(quán)計(jì)算的，通過(guò)權(quán)重，不同的樣式最終會(huì)作用到你的網(wǎng)頁(yè)中。
如果兩個(gè)選擇器同時(shí)作用到一個(gè)元素上，權(quán)重高者生效。

權(quán)重的基本規(guī)則

1、相同的權(quán)重：以后面出現(xiàn)的選擇器為最后規(guī)則（比如寫(xiě)了相同的兩個(gè)樣式 #content h2 {color:red} ）

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

3、！important（無(wú)限大）>行內(nèi)樣式（權(quán)重1000）>id選擇器（權(quán)重100）>類(lèi)選擇器（10）=偽類(lèi)選擇器（10）=屬性選擇器（10）>元素選擇器（1）>通用選擇器（0）>繼承的樣式>瀏覽器默認(rèn)的樣式。

4、元素選擇器相加永遠(yuǎn)沒(méi)有類(lèi)選擇器的權(quán)重大。

選擇器可能會(huì)包含一個(gè)或者多個(gè)與權(quán)重相關(guān)的計(jì)算點(diǎn)，若經(jīng)過(guò)計(jì)算得到的權(quán)重值越大，則認(rèn)為這個(gè)選擇器的權(quán)重高

css權(quán)重計(jì)算

如果多個(gè)不同類(lèi)型的選擇器同時(shí)為一個(gè)對(duì)象設(shè)置樣式時(shí)，該對(duì)象將如何顯示最終樣式，下面給出一個(gè)簡(jiǎn)單的計(jì)算方法。對(duì)于常規(guī)選擇器它們都擁有一個(gè)優(yōu)先級(jí)加權(quán)值，說(shuō)明如下。

標(biāo)簽選擇器：優(yōu)先級(jí)加權(quán)值為 1。
偽元素或偽對(duì)象選擇器：優(yōu)先級(jí)加權(quán)值為 1。
類(lèi)選擇器：優(yōu)先級(jí)加權(quán)值為 10。
屬性選擇器：優(yōu)先級(jí)加權(quán)值為 10。
ID選擇器：優(yōu)先級(jí)加權(quán)值為 100。
其他選擇器：優(yōu)先級(jí)加權(quán)值為 0，如通配選擇器等。

然后，以上面加權(quán)值數(shù)為起點(diǎn)來(lái)計(jì)算每個(gè)樣式中選擇器的總加權(quán)值數(shù)。計(jì)算的規(guī)則如下：

統(tǒng)計(jì)選擇器中 ID 選擇器的個(gè)數(shù)，然后乘以100。
統(tǒng)計(jì)選擇器中類(lèi)選擇器的個(gè)數(shù)，然后乘以 10。
統(tǒng)計(jì)選擇器中的標(biāo)簽選擇器的個(gè)數(shù)，然后乘以 1。

依此方法類(lèi)推，最后把所有加權(quán)值數(shù)相加，即可得到當(dāng)前選擇器的總加權(quán)值，最后根據(jù)加權(quán)值來(lái)決定哪個(gè)樣式的優(yōu)先級(jí)大。

對(duì)于由多個(gè)選擇器組合而成的復(fù)合型選擇器，首先分別計(jì)算每個(gè)組成選擇器的加權(quán)值，接著相加得出當(dāng)前選擇器的總分，最后根據(jù)選擇器的分值大小，分值越高則優(yōu)先級(jí)越高，那么就將應(yīng)用它所設(shè)置的樣式。

如果分值相同，則根據(jù)位置關(guān)系來(lái)進(jìn)行判斷，靠近對(duì)象的樣式就應(yīng)有高的優(yōu)先級(jí)。

【示例】通過(guò)內(nèi)嵌樣式為同一個(gè)元素使用不同的復(fù)合選擇器為其設(shè)置樣式屬性，通過(guò)優(yōu)先級(jí)規(guī)則進(jìn)行比較得出最終樣式屬性值。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS樣式優(yōu)先級(jí)</title>
<style type="text/css">
div{
    margin: 0 auto;  /*div居中*/
    text-align: center;  /*文本居中*/
}
.Cent{
    width: 400px;  /*設(shè)置寬度，否則居中看不見(jiàn)效果*/
    border: 1px dashed #CC0099;  /*類(lèi)別選擇器設(shè)置邊框線*/
    padding: 10px 15px;  /*設(shè)置間距*/
}
#imp{border: 1px dashed #3366FF;  /*ID 選擇器設(shè)置邊框線*/ }
.Cent{ font-size: 14px;  /*類(lèi)別選擇器設(shè)置字體大小*/ }
.Cent p{
    font-size: 16px;  /*類(lèi)別選擇器和標(biāo)記選擇器一起設(shè)置字體大小*/
    font-weight: bold;  /*字體加粗*/
}
.Cent .duanluo {
    font-weight: normal;  /*兩次類(lèi)別選擇器設(shè)置取消加粗效果*/
    line-height:1.5em;  /*段落行髙*/
    text-align:left;  /*文本左對(duì)齊*/
}
.Cent .duanluo span{ color:#009966;  /*復(fù)合選擇器設(shè)置字體彥員色*/ }
#imp span{
    color: #669933;  /*ID選擇器和標(biāo)簽選擇器進(jìn)行定義*/
    font-weight: bold;  /*字體加粗*/
    font-size:22px;  /*字體22像素，要比較的地方*/
}
span{ font-size: 30px important;  /*<span>標(biāo)簽使用優(yōu)先級(jí)最高的 !important 命令*/ }
span{ font-size: 40px; ! important  /*錯(cuò)誤手寫(xiě) !important 命令的位置*/ }
</style>
</head>
<body>
<div class="Cent" id="imp">
    <p class="duanluo" id="DL"><span>CSS</span>（Cascading Style Sheet，可譯為“層疊樣式表”或“級(jí)聯(lián)樣式表”）是一組格式設(shè)置規(guī)則，用于控制 Web 頁(yè)面的外觀。通過(guò)使用 CSS 樣式設(shè)置頁(yè)面的格式，可將頁(yè)面的內(nèi)容與表現(xiàn)形式分離。頁(yè)面內(nèi)容存放在 HTML 文檔中，而用于定義表現(xiàn)形式的 CSS 規(guī)則則存放在另一個(gè)文件中或 HTML 文檔的某一部分，通常為文件頭部分。將內(nèi)容與表現(xiàn)形式分離，不僅可使維護(hù)站點(diǎn)的外觀更加容易，而且還可以使 HTML 文檔代碼更加簡(jiǎn)練，縮短瀏覽器的加載時(shí)間。
</p>
</div>
</body>
</html>

頁(yè)面效果如下圖所示。

css權(quán)重有什么用

在上面示例中，查看瀏覽器效果并進(jìn)行逐步分析代碼，需要注意的是測(cè)試時(shí)：下面每一步測(cè)試時(shí)，后面的代碼需要?jiǎng)h除，故瀏覽器有多次顯示結(jié)果，每一步都進(jìn)行瀏覽器顯示查看結(jié)果。

第 1 步

實(shí)現(xiàn)瀏覽器居中，針對(duì) div 標(biāo)簽設(shè)置元素居中屬性margin: 0 auto;，以及文本居中屬性text-align:center;。

div { margin: 0 auto; text-align: center; }

第 2 步

Cent 層設(shè)置寬度為 400 像素，如果沒(méi)有寬度設(shè)置，則瀏覽器上的居中也將無(wú)效，接著設(shè)置 4 個(gè)方向的內(nèi)間距，最后設(shè)置 1 像素顏色為粉紅色虛線邊框線。

.Cent{ width: 400px; border: 1px dashed #CC0099; padding:10px 15px; }

第 3 步

通過(guò) ID 值引用 Cent 層，定義 1 像素顏色為粉藍(lán)色虛線邊框線，根據(jù)前面介紹的優(yōu)先級(jí)規(guī)則：類(lèi)選擇器 10 分、ID 選擇器 100 分，最終邊框線顏色為藍(lán)色。

如果將類(lèi)別選擇器 Cent 層和 ID 選擇器 #imp 定義的順序顛倒過(guò)來(lái)（如下所示），最終結(jié)果依然是藍(lán)色，其原因在于 ID 選擇器優(yōu)先級(jí)別高于類(lèi)選擇器。

.Cent{ width: 400px; border: 1px dashed #CC0099; padding: 10px 15px; }
#imp { border: 1px dashed #3366FF; }

第 4 步

.Cent{ } 定義字體大小為 14 像素，而 .Cent p{} 定義字體大小為 16 像素。根據(jù)前面介紹的優(yōu)先級(jí)規(guī)則：類(lèi)選擇器 10 分、標(biāo)簽選擇器 1 分，那么 .Cent{ } 為 10 分、.Cent p{} = 10+1 = 11分，故最終結(jié)果為段落字體大小為 16 像素且字體加粗顯示。

.Cent { font-size: 14px; }
.Cent p { font-size: 16px; font-weight: bold; }

第 5 步

Cent 層中段落添加 class 名 duanluo，定義字體不再加粗顯示、行高 1.5em、文本左對(duì)齊，上一步的加粗設(shè)置如果字體大小無(wú)效，則查看加粗結(jié)果，行高設(shè)置使用相對(duì)單位，這樣可以避免字體大小的改變而影響原先段落文字之間的距離。

段落內(nèi)的 <span> 標(biāo)簽設(shè)置字體顏色為 #009966，而通過(guò) ID 值設(shè)置字體顏色為 #669933。根據(jù)前面介紹的優(yōu)先級(jí)規(guī)則：類(lèi)選擇器 10 分、標(biāo)簽選擇器 1 分、ID 選擇器 100 分，故 .Cent .duanluo span 得分 = 10+10+1 = 21分，而 #imp span 得分 = 100+1 = 101 分，最終字體顏色為 #669933。

.Cent .duanluo { font-weight:normal; line-height:1.5em; text-align:left }
.Cent .duanluo span{ color: #009966; }
#imp span{ color:#669933; font-weight:bold; font-size:22px }

第 6 步

在設(shè)置段落字體大小時(shí)，最終 .Cent p 設(shè)置的字體大小為瀏覽器顯示結(jié)果：16像素，而通過(guò) ID 選擇器定義字體大小后，字體大小變?yōu)?22 像素。

這里通過(guò) !important 命令將 <span> 字體大小設(shè)置為 30 像素，因 !important 命令權(quán)限無(wú)限大，即分?jǐn)?shù)值較高，暫定值為 1000，故 #imp span 分?jǐn)?shù)為 101，小于 !important 命令值 1000，最終結(jié)果為 30 像素。

若span{ font-size:30px !important; }和#imp span{ font-size:5Opx !important; }進(jìn)行比較，根據(jù)前面介紹的優(yōu)先級(jí)規(guī)則：ID 選擇器 100 分、標(biāo)簽選擇器 1 分、!important 命令值 1000，故 span{} 得分為 1000（內(nèi)部屬性中 !important）+1（標(biāo)簽選擇器）= 1001 分，而 #imp span 得分為 1000（內(nèi)部屬性中 !important）+100（ID選擇器）+1（標(biāo)簽選擇器）= 1101 分。

針對(duì) !important 命令進(jìn)行一次錯(cuò)誤的寫(xiě)法并定義字體大小為 40 像素，通過(guò)瀏覽器發(fā)現(xiàn)：!important 命令放置在聲明語(yǔ)句與分號(hào)之間，否則無(wú)效。

.Cent p { font-size: 16px; }
#imp span{ color:#669933; font-weight:bold; font-size:22px }
span{ font-size: 30px !important; }
span { font-size: 40px; !important }  /*錯(cuò)誤書(shū)寫(xiě)方法*/

感謝各位的閱讀，以上就是“css權(quán)重有什么用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)css權(quán)重有什么用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問(wèn)一下細(xì)節(jié)

css權(quán)重有什么用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽