CSS樣式的繼承與覆蓋

2021-09-24 13:49:41 字數 2181 閱讀 7689

定義：父元素設定了某屬性，子元素也會有該屬性

下面是會被繼承的css樣式屬性：

azimuth, border-collapse, border-spacing,


caption-side, color, cursor, direction, elevation,


empty-cells, font-family, font-size, font-style,


font-variant, font-weight, font, letter-spacing,


line-height, list-style-image, list-style-position,


list-style-type, list-style, orphans, pitch-range,


pitch, quotes, richness, speak-header, speaknumeral,


speak-punctuation, speak, speechrate,


stress, text-align, text-indent, texttransform,


visibility, voice-family, volume, whitespace,


widows, word-spacing
font-family, font-size, font-style,


font-variant, font-weight, font, letter-spacing,


line-height, text-align, text-indent, texttransform,word-spacing
list-style-image, list-style-position,


list-style-type, list-style
規則：

根據引入方式確定優先順序

後寫的覆蓋先寫的（同一級別）

即就是在檔案上**行號更靠下的優先順序更高

加有「！important」的樣式，優先順序最高

即無論哪一種情況，只要在樣式上加了important,那麼該樣式的優先順序最高。加了important的**如下：

p
選擇器優先順序

在選擇器不同的情況下，給每種選擇器制定乙個權值，計算命中乙個元素的所有選擇器的總權值，值高者獲勝

元素選擇器： 1


類選擇起器： 10


id選擇器： 100


內聯選擇器： 1000
樣式繼承與覆蓋示例

樣式繼承不是乙個預設行為，實際上而是看某乙個屬性的預設值是否是inherit。 所謂的瀏覽器預設樣式。a標籤的color瀏覽器預設樣式不是inherit。

.abstract


.abstract a


.different 


.different a


前面講到外部檔案引用css
的優先順序比style標籤裡的低。 但是id選擇器的優先順序是比元素選擇器要高的。所以當元素選擇器和id選擇器都命中同樣的元素的時候， id選擇器的樣式會覆蓋元素選擇器的樣式。

h1


#change
我們知道內聯樣式的優先順序是最高的，那麼當元素已經被內聯樣式設定的時候。我們通過 !important　來覆蓋。



h1#change
若給一種元素設定了普適的效果，如何通過更精確的選擇器將其覆蓋掉。

a


a.hehe
當乙個元素有兩個class的時候，到底哪個class會影響 元素呢?

a.hehe1


a.hehe2
檔案上**行號更靠下的優先順序更高,即後寫的覆蓋先寫的。

讓span繼承abstract的border屬性。

.abstract


span
將span 的 border 屬性設為「inherit」，span 就會繼承父元素的樣式。

CSS可繼承的樣式

1 color 2 font family 3 font weight 4 font size 百分數根據父元素的字型大小來計算 5 font style 6 font variant 字型變形 7 line hieght 百分數根據當前元素的font size計算 8 font 值順序 font ...

css樣式繼承體現

css樣式繼承體現 選擇器再講解 4 3 3 四個基本選擇器 通用選擇器 標籤選擇器 標籤名 id選擇器 id名 類名選擇器 類名 類就是被重用的，乙個標籤可以有多個類，乙個類可以用在多個標籤上 ps 掛類法編寫樣式 三套複雜選擇器格式 e f為基本選擇器 後代選擇器 e 有空格 f 空格表示後代，...

CSS基礎 4 CSS樣式的層疊與繼承

目錄 一 樣式衝突的解決之道 二 標籤樣式 直接修改預設樣式 三 類樣式定義 四 id樣式 五 行內樣式 網頁上乙個元素的樣式可能來自很多地方，有瀏覽器預設的樣式，也有使用者為這個標籤定義的樣式，還有標籤上應用的類樣式等。當有來自多個不同地方的樣式作用到同乙個元素上時，必須有一套機制來解決這種樣式上...