樣式的衝突 當我們通過不同的選擇器，選中相同的元素，並且為相同的樣式設置不同的值時，此時就發生了樣式的衝突。 案例一：使用類選擇器與元素選擇器選中同一元素，設置不同顏色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> ...
樣式的衝突
- 當我們通過不同的選擇器，選中相同的元素，並且為相同的樣式設置不同的值時，此時就發生了樣式的衝突。
案例一：使用類選擇器與元素選擇器選中同一元素，設置不同顏色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.red {
color: red;
}
div {
color: yellowgreen;
}
</style>
</head>
<body>
<div class="red">我是一個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 class="box1 box2">我是一個div</div>
</body>
</html>
使用!important
可以在某一個樣式的後邊添加 !important ，則此時該樣式會獲取到最高的優先順序，甚至超過內聯樣式，但是在開發中這個玩意一定要慎用！因為一旦確定好優先順序，就不方便更改
.box2 {
background-color: yellow !important;
}
.box1 {
background-color: orange;
}
參考
視頻鏈接（P39）
尚矽谷Web前端零基礎入門HTML5+CSS3基礎教程丨初學者從入門到精通
