我們在使用css時，會出現樣式覆蓋的問題每當樣式的覆蓋發生衝突時，一優先順序高的為準。
對於樣式覆蓋發生的衝突，常見的共有以下5種情況。
css有三種常用的引用方式，分別是外部樣式、內部樣式和行內樣式。
這3種引入方式的優先順序如下：
行內樣式》(內部樣式=外部樣式)
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
rel=
"stylesheet"
href
="index.css"
type
="text/css"
>
type
="text/css"
>
divstyle
>
head
>
>
style
="color
: hotpink;
">
hello everyonediv
>
body
>
html
>
繼承方式衝突涉及到css的兩大特性種的繼承性，可參考
如果時郵局繼承方式是引起的衝突，則「最近的祖先元素」獲勝。
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
type
="text/css"
>
body
#gf#f
style
>
head
>
>
"gf"
>
"f">
"son"
>
hello everyonediv
>
div>
div>
body
>
html
>
指定樣式指的是指定的當前樣式，當指定樣式發生衝突的時候，權重高的樣式獲勝。
各種選擇器的權重如下表：
選擇器權重
萬用字元0
偽元素1
元素選擇器
1class選擇器
10偽類
10屬性選擇器
10id選擇器
100行內樣式
1000
常見的偽元素有：::before、::after、::first-letter和::first-line。
常見的偽類有：hover、:first-child
常用的選擇器優先順序如下：
行內樣式》id選擇器》class選擇器》元素選擇器
舉例
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
type
="text/css"
>
#t.t
divstyle
>
head
>
>
"t" class
="t"
>
hello everybodydiv
>
body
>
html
>
當繼承樣式和指定樣式發生衝突時，指定樣式優先。
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
type
="text/css"
>
body
#t#t .f
span
; strong
style
>
head
>
>
"t">
class
="f"
>
>
>
hello everybodystrong
>
span
>
p>
div>
body
>
html
>
css樣式的覆蓋優先順序
當使用body元素應用樣式時 body 其他元素都會繼承此body元素，比如文字會是綠色 你的段落 在之前的基礎上，當我們建立乙個使文字變成藍色的css class text1 並應用到乙個元素時，新建的class會覆蓋body元素的color green,所應用顏色為藍色 你的段落 多個class...
CSS 中樣式覆蓋優先順序
我們在日常開發，總會遇到樣式覆蓋問題。有時候修改後的樣式，並沒有根據自己的意願顯示出來。這裡就可能跟樣式覆蓋優先順序有關。1 首先，層疊優先順序是 內聯樣式 內部樣式表 外部樣式表 下面以具體例項說明 test.html檔案 lang zh cn charset utf 8 層疊優先順序title ...
css樣式優先順序
多重樣式將層疊為乙個 樣式表允許以多種方式規定樣式資訊。樣式可以規定在單個的 html 元素中，在 html 頁的頭元素中，或在乙個外部的 css 檔案中。甚至可以在同乙個 html 文件內部引用多個外部樣式表。層疊次序 當同乙個 html 元素被不止乙個樣式定義時，會使用哪個樣式呢？一般而言，所有...