樣式的沖突
- 當我們通過不同的選擇器，選中相同的元素，并且為相同的樣式設定不同的值時，此時就發生了樣式的沖突，
案例一：使用類選擇器與元素選擇器選中同一元素，設定不同顏色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.red {
color: red;
}
div {
color: yellowgreen;
}
</style>
</head>
<body>
<div >我是一個div</div>
</body>
</html>
可以看到紅色優先
選擇器的權重
這是因為發生樣式沖突時，應用哪個樣式由選擇器的權重（優先級）決定，誰前面位數越前，則誰越優先，可以看到類選擇器優于元素選擇器，
| 選擇器 | 權重 |
|---|---|
| 行內樣式 | 1,0,0,0 |
| id選擇器 | 0,1,0,0 |
| 類和偽類選擇器 | 0,0,1,0 |
| 元素選擇器 | 0,0,0,1 |
| 通配選擇器 | 0,0,0,0 |
| 繼承的樣式 | 沒有優先級 |
比較優先級時，需要將所有的選擇器的優先級進行相加計算，最后優先級越高，則越優先顯示（分組選擇器是單獨計算的）,說白就是看誰寫得越長，就越優先，
案例二：元素與id選擇器進行復合，跟只使用id選擇器比較
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#box1 {
background-color: orange;
}
div#box1 {
background-color: yellow;
}
</style>
</head>
<body>
<div id="box1">我是一個div</div>
</body>
</html>
注意點：
選擇器的累加不會超過其最大的數量級，比如類選擇器再高（有11個）也不會超過id選擇器
案例三：同一個選擇器優先級比較
如果同一個選擇器優先級計算后相同，此時則優先使用靠下的style樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.box2 {
background-color: yellow;
}
.box1 {
background-color: orange;
}
</style>
</head>
<body>
<div >我是一個div</div>
</body>
</html>
使用!important
可以在某一個樣式的后邊添加 !important ，則此時該樣式會獲取到最高的優先級，甚至超過行內樣式，但是在開發中這個玩意一定要慎用！因為一旦確定好優先級，就不方便更改
.box2 {
background-color: yellow !important;
}
.box1 {
background-color: orange;
}
參考
視頻鏈接（P39）
尚硅谷Web前端零基礎入門HTML5+CSS3基礎教程丨初學者從入門到精通
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501203.html
標籤：其他
上一篇：BOM
下一篇：用JS實作一個簡單的購物車小案例