css的層疊特性

3.1.1 層疊性

所謂層疊性，是指對同一元素同一屬性的設定，後設定的某個樣式（屬性），會覆蓋之前設定的樣式。

比如：.cc1

.cc1

文字內容

則class為cc1的元素中的文字顏色就是blue，即後者覆蓋了前者的設定。

分兩種情況：

１，兩個相同的選擇器，設定了同樣的屬性，後者覆蓋前者——層疊性體現之一。

２，兩個不同但同級優先性的選擇器，設定了同樣的屬性，也是後者覆蓋前者——體現之二。

3.1.2 繼承性

所謂繼承性，是指對某個元素所設定的樣式，不但影響該元素本身，還可能影響該元素的後代元素。

比如：.cc1

文字1文字2

則此時文字1和文字2實際都是紅色。

注意：實際上繼承性不是普遍情況，而只是少數一些屬性才具有繼承性（即能夠影響後代元素）。

應用中繼承性通常用在有關文字的屬性上。

3.1.3 優先性

所謂優先順序，就是指乙個標籤的顯示效果（樣式表現），可能受若干個因素的影響，但哪乙個因素的影響大，則最終效果就按該因素的設定，也就是「更優先」的意思。

比如：#pro

.ppp

小公尺note 4

則此時該文字的大小實際是20px。

那，優先順序怎麼定的？

結論如下：

偽元素選擇器 > !important > 行內樣式 >id選擇器 >類選擇器（或偽類選擇器） >元素選擇器 > *> 繼承樣式 > 瀏覽器預設樣式

其中，偽元素選擇器又有： ::first-letter > ::selection > ::first-line

上述黃色背景部分在實際應用中最常見。

什麼是「!important」?

就是在乙個屬性的設定中，在屬性值後面加「!important」標識，然後在加分號（;），例如：

.c1#d1

此時，如果上述兩個選擇器都能選中某乙個元素，則其中的文字就是紅色（!important優先了）

選擇器的優先順序怎麼計算？

對於復合選擇器（比如div.c1， 或 #id1>.c2， 或#id2>.c3 p span，等等），又該怎麼確定他們的優先順序呢？

首先，根據上述的基本優先順序原則，遵循「官大一級壓死人」的規則。

比如：選擇器1： #id1

選擇器2： .c1>.c2>p

則選擇器1優先；

其次，如果具有同級的優先順序，則比誰的數量多。

比如：選擇器1： .cc1 .cc3 ，

選擇器2： .cc1 .cc2 .cc3

則選擇器2優先；

最後，綜合上述兩條規則就可以判斷出哪個是優先的。

css的層疊特性

3.1.1 層疊性 所謂層疊性，是指對同一元素同一屬性的設定，後設定的某個樣式 屬性 會覆蓋之前設定的樣式。比如 cc1 cc1 文字內容 則class為cc1的元素中的文字顏色就是blue，即後者覆蓋了前者的設定。分兩種情況 兩個相同的選擇器，設定了同樣的屬性，後者覆蓋前者 層疊性體現之一。兩個不...

css特性 繼承和層疊

1.乙個元素如果沒有設定某屬性的值,就會跟隨父元素的值 2.當然,乙個元素如果有設定某屬性的值,就會使用自己設定的值 3.比如color font size等屬性是可以繼承的 4.可以用inherit強制繼承 5.css繼承的是計算值 css允許多個css屬性層疊 1.使用相同的選擇器,後面的會把前...

CSS三大特性之層疊性

css 三大特性之二層疊性，什麼是層疊行，層疊性就是瀏覽器處理衝突的乙個特性，如果乙個屬性通過多個選擇器設定到同乙個元素上面，那麼這個時候就會只有乙個選擇器起作用，而其他的選擇器都將背層疊掉，前提是選擇器的權重一樣，也就是說這些選擇器的優先順序相同，後面的部落格會講優先順序，這裡先考慮優先順序相同。...