CSS宣告衝突與層疊機制

2022-07-01 19:03:10 字數 1271 閱讀 9743

css宣告衝突:當多個選擇器選中同乙個標籤,如果屬性名相同,屬性值不同時則會產生衝突。

舉個例子:

html:

css宣告衝突

css:

p

.txt

body > p

最終文字顏色為紅色:

css層疊機制:如果發生宣告衝突瀏覽器會自動觸發自己的層疊機制,在上面例子發生宣告衝突的過程中瀏覽器就觸發了層疊機制,層疊過程分成3步:

1.比較優先順序

作者(寫**的人),使用者(瀏覽頁面的人)和使用者**(一般指瀏覽器)。一般來說作者指定的樣式權重值高於使用者樣式權重值,使用者樣式權重高於客戶端(使用者**)權重值。一般權重值跟物件,是否有!important(在屬性值後跟上!important 就表示這是一條重要宣告,不加則是普通宣告),特異度和位置先後有關。在層疊順序中,以下權重值從小到大為:

(1)使用者**樣式

(2)使用者一般樣式

(3)作者一般樣式

(4)作者重要樣式(!important)

(5)使用者重要樣式(!important)

2.比較特殊性

每個宣告都有乙個權重(特殊性),特殊性高的會勝出,低的淘汰,在比較特殊性時,每個衝突的宣告會生成四個數字分組(a、b、c、d)來比較特殊性

分組值會根據選擇器的型別而定,它們有四個規則:

(1)、使用id選擇器數字分組b值+1(0,1,0,0)

(2)、使用class、屬性(如[color="red"])、偽類(如:hover) 數字分組c值+1(0,0,1,0)

(3)、使用元素和偽元素(如::before) 數字分組d值+1(0,0,0,1)

(4)、使用萬用字元(*)、子選擇器(>)、相鄰同胞選擇器(+)等選擇器數字分組值是(0,0,0,0)(所以他對總特殊性沒有影響)

到這裡會發現分組值a沒有說,a值是行內樣式的,所以行內樣式特殊性最高,數字分組值是(1,0,0,0)

綜上所述,最開始的例子特殊性比較如下:

p

.txt

body > p

3.比較原次序

首先瀏覽器是從上往下解析**的,所以在前面兩步都未分出勝負的情況下,寫在下面的**則會勝出

舉個例子:

p

p

這裡優先順序和特殊性都無法分出勝負,寫在下面的會勝出,最終p標籤文字顏色為紅色,所以css重置檔案我們也會放在最上面再引入自己的css檔案。

三 CSS層疊機制

層疊就是對樣式的層疊。是某種樣式在樣式表中逐層疊加的過程。讓瀏覽器對某個標籤特定屬性值的多個 最終確定使用那個值。層疊是整個css的核心機制。1.瀏覽器預設樣式,每個瀏覽器本身就有一套預設的樣式 2.使用者樣式,這對於視障使用者很重要 3.作者樣式。也就是web開發者設計的樣式 瀏覽器層疊各個樣式的...

CSS選擇器與宣告衝突

css選擇器有,元素選擇器 id選擇器 類選擇器 後代選擇器 子元素選擇器 相鄰兄弟選擇器 通用選擇器 不相鄰兄弟 並集選擇器 群組選擇器 萬用字元選擇器還有偽類選擇器等在這裡我i就介紹以下幾種,偽類選擇器在我的其它文章有介紹可自行檢視。1 元素選擇器就是選中相同元素定義乙個css樣式。2 id選擇...

css屬性值的層疊衝突規則

層疊衝突 同乙個樣式,多次用到同乙個元素,就會發生層疊衝突,需要對樣式表有衝突的申明使用層疊規則,確定css屬性值 color 000000 important 總體規則 選擇器選中的範圍越窄,越特殊 具體規則 通過選擇器,計算出乙個4位數 數值越大,屬性值的優先順序越高 千位 若果是內聯樣式,記1...