樣式的衝突：
- 當我們通過不同的選擇器，選中相同的元素時，並且為相同的樣式設定不同的值時，此時就發生了樣式的衝突
發生樣式衝突時，應用哪個樣式由選擇器的權重（優先順序）決定
選擇器的權重：
內聯樣式： 1000
id選擇器： 100
類和偽元素選擇器：10
元素選擇器： 1
通配選擇器： 0
繼承的樣式 沒有優先順序
比較優先順序時，需要將所有的選擇器的優先順序進行相加運算，最後優先順序越高，越優先顯示（分組選擇器是單獨計算的）
選擇器的累加不會超過其數量級，例如類選擇器累加最大值不會到100，頂多到90（可以這麼記，你想記99也行）
如果優先順序相同，則優先使用比較靠下的樣式
lang
="en"
>
>
charset
="utf-8"
>
>
選擇器權重title
>
>
/** 樣式的衝突：
- 當我們通過不同的選擇器，選中相同的元素時，並且為相同的樣式設定不同的值時，此時就發生了樣式的衝突
發生樣式衝突時，應用哪個樣式由選擇器的權重（優先順序）決定
選擇器的權重：
內聯樣式： 1000
id選擇器： 100
類和偽元素選擇器：10
元素選擇器： 1
*/#box1
#div
.red
style
>
head
>
>
"box1"
class
="red"
style
="background-color
: cornflowerblue
">
我是乙個divdiv
>
body
>
html
>
這裡只給了內聯樣式選擇器的顯示結果，如果想驗證其他選擇器的優先順序，可以逐一驗證，先去掉內聯選擇器的樣式，再去掉id選擇器的樣式。。。。看是否符合。
**二：
lang
="en"
>
>
charset
="utf-8"
>
>
選擇器權重title
>
>
#box1
div#box1
.red
style
>
head
>
>
"box1"
class
="red"
>
我是乙個divdiv
>
body
>
html
>
注意：如果想要越級到達巔峰（優先順序超過內聯樣式），那麼只需要在樣式後邊加上!important
例如：
lang
="en"
>
>
charset
="utf-8"
>
>
選擇器權重title
>
>
#box1
div#box1
.red
style
>
head
>
>
"box1"
style
="background-color
: red
">
我是乙個divdiv
>
body
>
html
>
易錯點：
!important要寫在分號（;）前面
CSS 選擇器優先順序（權重）
請問div的背景顏色為紅色還是綠色呢？lang en charset utf 8 documenttitle divstyle head style background color green div body html 答案為綠色。為什麼會是綠色呢？難道存在 執行的先後的覆蓋問題？請看第二個問題...
CSS 選擇器權重（優先順序）
計算指定選擇器的優先順序 重新認識css的權重 important 加1,0,0,0 id 選擇器 如 id 加0,1,0,0 class 類選擇符 如 class 每個屬性選擇符 如 attribute 每個偽類 如 hover 加0,0,1,0 元素選擇符 如p 或偽元素選擇符 如 firstc...
選擇器優先順序 CSS選擇器優先順序總結
css選擇器優先順序這個問題，相信有點經驗前端都會認為非常簡單，但是我們今天還是來總結一下吧。相信大家應該很少直接在html頁面寫樣式吧，一般都是用link標籤匯入css樣式表。使用者自定義樣式表就是我們用link標籤引入的css樣式表，為了保持不同瀏覽器下樣式相同，所以我們的自定義樣式表一般都會覆...