css的樣式和選擇符的優先權

2022-09-17 16:57:13 字數 889 閱讀 1829

樣式優先權:

1.內聯式【行內樣式】——>內嵌式【內部式】——>外鏈式【外部式】——>@import url匯入式

//內聯式(行內樣式):

<

p style

="color:green;font-size:40px;"

>第一段

p>

//內嵌式(內部式):

<

style

type

="text/css"

>

h1.content

.bigtext

#play

style

>

//外鏈式(外部式):

<

link

href

="style.css"

rel="stylesheet"

type

="text/css"

>

//匯入式:

<

style

type

="text/css"

>

@import url("style.css");

style

>

內嵌式【內部式】,外鏈式【外部式】 這兩種用的最多

2.css優先權:就近原則(同乙個頁面內,越往後的樣式優先度越高,會覆蓋前面的樣式)

作用範圍越小,優先權越高;

離要修飾的目標距離越近的樣式優先權越高;

選擇符優先權:

1.行內——>id——>class——>標籤選擇符

我們可以採用!important語法來提公升優先權

p

CSS樣式優先權

當同乙個 html 元素被不止乙個樣式定義時,會使用哪個樣式呢?一般而言,所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中,其中數字 1擁有最高的優先權。1.內聯樣式 在 html 元素內部 2.內部樣式表 位於 標籤內部 3.外部樣式表 4.瀏覽器預設設定 因此,內聯樣式 在 html 元素內...

CSS的優先權

css2.1 中規定了關於css 規則specificity 特異性 的計算方式,用乙個四位的數字串 注 css2 中是用三位 來表示,最後以specificity 的高低判斷css 的優先權。specificity 具體的計算規則 元素的style 樣式屬性,加1,0,0,0。每個id 選擇符 i...

詳解CSS的優先權

發現很多朋友對 css 的優先權不甚了解,規則很簡單。需要說明的一點,如果你的樣式管理需要深層判斷 css 的優先權,更應反思自己的 css 是否合理?是否優化?css2.1 中規定了關於 css 規則 specificity 特異性 的計算方式,用乙個四位的數字串 注 css2 中是用三位 來表示...