css權重有什麼意義-前端問答-PHP中文網

首頁

web前端

前端問答

css權重有什麼意義

青灯夜游

Dec 09, 2021 pm 01:45 PM

css 權重

CSS權重指的是樣式的優先權，決定了css規則怎樣被瀏覽器解析直到生效；當兩條或多條樣式作用於一個元素時，權重高的那條樣式對元素起作用，而權重相同的，後寫的樣式會覆蓋前面寫的樣式。

css權重有什麼意義

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

CSS權重指的是樣式的優先權，有兩條或多條樣式作用於一個元素，權重高的那條樣式對元素起作用，權重相同的，後寫的樣式會覆蓋前面寫的樣式。

權重決定了你css規則怎麼被瀏覽器解析直到生效。「css權重關係到你的css規則是怎麼顯示的」。
當很多的規則被應用在某一個元素上時，權重是一個決定哪一個規則生效，或是優先權的過程。
每個選擇器都有自己的權重。你的每條css規則，都包含一個權重等級。這個等級是由不同的選擇器加權計算的，透過權重，不同的樣式最終會作用到你的網頁中。
如果兩個選擇器同時作用到一個元素上，權重高者就會生效。

權重的基本規則

1、相同的權重：以後面出現的選擇器為最後規則（例如寫了相同的兩個樣式#content h1 {color:red} ）

2、不同的權重，權重值高則生效

3、！ important（無限大）>行內樣式（權重1000）>id選擇器（權重100）>類別選擇器（10）=偽類選擇器（10）=屬性選擇器（10）>元素選擇器（1）>通用選擇器（0）>繼承的樣式>瀏覽器預設的樣式。

4、元素選擇器相加永遠沒有類別選擇器的權重大。

選擇器可能會包含一個或多個與權重相關的計算點，若經過計算得到的權重值越大，則認為這個選擇器的權重高

css權重計算

如果多個不同類型的選擇器同時為一個物件設定樣式時，該物件將如何顯示最終樣式，下面給出一個簡單的計算方法。對於常規選擇器它們都擁有一個優先權加權值，說明如下。

標籤選擇器：優先權加權值為 1。
偽元素或偽物件選擇器：優先權加權值為 1。
類別選擇器：優先權加權值為 10。
屬性選擇器：優先權加權值為 10。
ID選擇器：優先權加權值為 100。
其他選擇器：優先權加權值為 0，如通配選擇器等。

然後，以上方加權值數為起點來計算每個樣式中選擇器的總加權值數。計算的規則如下：

統計選擇器中 ID 選擇器的個數，然後乘以100。
統計選擇器中類別選擇器的個數，然後乘以 10。
統計選擇器中的標籤選擇器的個數，然後乘以 1。

依此方法類別推，最後把所有加權值數相加，即可得到目前選擇器的總加權值，最後根據加權值來決定哪個樣式的優先權大。

對於由多個選擇器組合而成的複合型選擇器，首先分別計算每個組成選擇器的加權值，接著相加得出當前選擇器的總分，最後根據選擇器的分值大小，分數越高則優先順序越高，那麼就將套用它所設定的樣式。

如果分數相同，則根據位置關係來判斷，靠近物件的樣式就應有高的優先權。

【範例】透過內嵌樣式為同一個元素使用不同的複合選擇器為其設定樣式屬性，透過優先權規則進行比較得出最終樣式屬性值。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式优先级</title>
<style type="text/css">
div{
    margin: 0 auto;  /*div居中*/
    text-align: center;  /*文本居中*/
}
.Cent{
    width: 400px;  /*设置宽度，否则居中看不见效果*/
    border: 1px dashed #CC0099;  /*类别选择器设置边框线*/
    padding: 10px 15px;  /*设置间距*/
}
#imp{border: 1px dashed #3366FF;  /*ID 选择器设置边框线*/ }
.Cent{ font-size: 14px;  /*类别选择器设置字体大小*/ }
.Cent p{
    font-size: 16px;  /*类别选择器和标记选择器一起设置字体大小*/
    font-weight: bold;  /*字体加粗*/
}
.Cent .duanluo {
    font-weight: normal;  /*两次类别选择器设置取消加粗效果*/
    line-height:1.5em;  /*段落行髙*/
    text-align:left;  /*文本左对齐*/
}
.Cent .duanluo span{ color:#009966;  /*复合选择器设置字体彦员色*/ }
#imp span{
    color: #669933;  /*ID选择器和标签选择器进行定义*/
    font-weight: bold;  /*字体加粗*/
    font-size:22px;  /*字体22像素，要比较的地方*/
}
span{ font-size: 30px important;  /*<span>标签使用优先级最高的 !important 命令*/ }
span{ font-size: 40px; ! important  /*错误手写 !important 命令的位置*/ }
</style>
</head>
<body>
<div class="Cent" id="imp">
    <p class="duanluo" id="DL"><span>CSS</span>（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制 Web 页面的外观。通过使用 CSS 样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在 HTML 文档中，而用于定义表现形式的 CSS 规则则存放在另一个文件中或 HTML 文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使 HTML 文档代码更加简练，缩短浏览器的加载时间。
</p>
</div>
</body>
</html>

登入後複製

頁面效果如下圖所示。

css權重有什麼意義

在上面範例中，查看瀏覽器效果並進行逐步分析程式碼，需要注意的是測試時：在下面每一步測試時，後面的程式碼需要刪除，故瀏覽器有多次顯示結果，每個步驟都進行瀏覽器顯示查看結果。

第 1 步

實作瀏覽器居中，針對 div 標籤設定元素居中屬性margin: 0 auto;，以及文字居中屬性text-align:center;。

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

登入後複製

第2 步驟

Cent 層設定寬度為400 像素，如果沒有寬度設置，則瀏覽器上的居中也會無效，接著設定4 個方向的內間距，最後設定1 像素顏色為粉紅色虛線邊框線。

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

登入後複製

第 3 步

通过 ID 值引用 Cent 层，定义 1 像素颜色为粉蓝色虚线边框线，根据前面介绍的优先级规则：类选择器 10 分、ID 选择器 100 分，最终边框线颜色为蓝色。

如果将类别选择器 Cent 层和 ID 选择器 #imp 定义的顺序颠倒过来（如下所示），最终结果依然是蓝色，其原因在于 ID 选择器优先级别高于类选择器。

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

登入後複製

第 4 步

.Cent{ } 定义字体大小为 14 像素，而 .Cent p{} 定义字体大小为 16 像素。根据前面介绍的优先级规则：类选择器 10 分、标签选择器 1 分，那么 .Cent{ } 为 10 分、.Cent p{} = 10+1 = 11分，故最终结果为段落字体大小为 16 像素且字体加粗显示。

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

登入後複製

第 5 步

Cent 层中段落添加 class 名 duanluo，定义字体不再加粗显示、行高 1.5em、文本左对齐，上一步的加粗设置如果字体大小无效，则查看加粗结果，行高设置使用相对单位，这样可以避免字体大小的改变而影响原先段落文字之间的距离。

段落内的标签设置字体颜色为 #009966，而通过 ID 值设置字体颜色为 #669933。根据前面介绍的优先级规则：类选择器 10 分、标签选择器 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 步

在设置段落字体大小时，最终 .Cent p 设置的字体大小为浏览器显示结果：16像素，而通过 ID 选择器定义字体大小后，字体大小变为 22 像素。

这里通过 !important 命令将字体大小设置为 30 像素，因 !important 命令权限无限大，即分数值较高，暂定值为 1000，故 #imp span 分数为 101，小于 !important 命令值 1000，最终结果为 30 像素。

若span{ font-size:30px !important; }和#imp span{ font-size:5Opx !important; }进行比较，根据前面介绍的优先级规则：ID 选择器 100 分、标签选择器 1 分、!important 命令值 1000，故 span{} 得分为 1000（内部属性中 !important）+1（标签选择器）= 1001 分，而 #imp span 得分为 1000（内部属性中 !important）+100（ID选择器）+1（标签选择器）= 1101 分。

针对 !important 命令进行一次错误的写法并定义字体大小为 40 像素，通过浏览器发现：!important 命令放置在声明语句与分号之间，否则无效。

.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 }  /*错误书写方法*/

登入後複製

（学习视频分享：css视频教程）

以上是css權重有什麼意義的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn