結論
1.每個選擇器有自己的權重得分
2.不同的選擇器設定的樣式屬性不同時, 不會發生覆寫問題, 最后顯示時所有樣式會合并
3.不同的選擇器設定的樣式屬性相同時，權重大的樣式會被使用，當權重也相同時，按樣式的書寫順序進行覆寫，后面的樣式會覆寫前面
4.當使用復合選擇器時, 總權重為各個基礎選擇器的累加得分
選擇器樣式權重表
| 選擇器 | 權重得分 |
| 行內樣式 | 1000 |
| 指定ID | 100 |
| 類、偽類、后代、子元素 | 10 |
| 元素、偽元素 | 1 |
| !important | 優先級最高 |
簡單選擇器案例
代碼
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS權重（樣式總是被覆寫, 你知道原理么？）</title>
<style>
#box {
width: 200px;
background-color: gray;
}
.container {
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="box" class="container"></div>
</body>
</html>運行
從結果看出盡管.container的書寫順序在后, 其設定的background-color仍會被覆寫
分析：
按照之前的權重表可以算出權重得分 #box=100, .container=10
所以當兩個選擇器設定的樣式相同時, 會以 #box為準，當設定的屬性不同時, 會進行合并，
合并: width, height
覆寫: .container的background-color被覆寫
復合型選擇器的案例
代碼
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS權重（樣式總是被覆寫, 你知道原理么？）</title>
<style>
div .container {
width: 200px;
background-color: gray;
}
p {
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div>
<p class="container"></p>
</div>
</body>
</html>運行
分析
我們已經知道了樣式覆寫是因為權重, 所以我們直接算權重得分
復合選擇器 = 11 ( div = 1, .container = 10)
p = 1
復合選擇器的權重 > p的權重
所以當樣式相同時, 必然會被復合選擇器覆寫
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/272036.html
標籤：區塊鏈
下一篇：域乎X螞蟻鏈：打造新購物模式？