繼承與層疊

2021-10-22 14:51:44 字數 999 閱讀 4544

1、繼承

定義:一些樣式給父元素設定後,其後代元素也會繼承父類的樣式,這就叫做繼承性。

後代元素只能繼承來自祖先元素的文字樣式。比如:color,text-開頭的,font-開頭的,line-開頭的。

關於盒子的屬性(寬,高,padding,margin),定位,布局的屬性,都不能被繼承。

a標籤的顏色與下劃線不能通過繼承改變,要直接作用在a標籤本身。

2、層疊

計算權重

同乙個樣式寫在不同的樣式表中,權重大小為:

行內樣式表 > 內嵌式+外聯式 (順序,後面的樣式會覆蓋前面的樣式。就近原則)

同乙個樣式表不同的選擇器,權重大小:

比較選擇器的數量,先比較id選擇器數量,id選擇器數量相同的話,再比較類選擇器的數量,類選擇器的數量相同的話,再比較標籤選擇器。

對於相同的樣式表,選擇器的優先順序為:

id選擇器 > 類選擇器 >標籤選擇器

權重相同時,比較書寫的順序,後面的會覆蓋前面的樣式。

總結

如果樣式存在與不同的樣式表。行內樣式表的權重最高,再比較內嵌式與外聯式的書寫順序。

同一樣式表中,數基礎選擇器的數量

id選擇器數量多的權重高

id選擇器數量相同,再看類選擇器的數量,誰多誰的權重高

類選擇器的數量也相同,比較標籤選擇器。

如果標籤選擇器的數量也相同,則比較書寫順序。

萬用字元的權重對標籤選擇器的權重要低,比繼承過來的要高。

important

important:提高屬性權重

屬性:屬性值 !important;

p

繼承與層疊

定義 一些樣式給父元素設定後,其後代元素也會繼承父類的樣式,這就叫做繼承性。後代元素只能繼承來自祖先的文字樣式。比如 color text 開頭的,font 開頭的,line 開頭的。關於盒子的屬性 寬,高,padding,margin 定位,布局的屬性,都不能被繼承。注意 a標籤的顏色與下劃線不能...

CSS 繼承與層疊

css 繼承 即,從父元素那繼承部分css屬性 好處 1.父元素設定樣式,子元素可以繼承部分屬性 2.減少css 注意 當元素本身的樣式與繼承而來的樣式有衝突時,將忽略繼承來的樣式,如下 chrom瀏覽器預設字型大小是16px h1 預設字型大小font size 是2em 正常字型的兩倍 因此,在...

CSS繼承與層疊

層疊優先順序 盒模型定位體系 常規流首先,css被稱為層疊樣式表,css有兩大特性 繼承性和層疊性 繼承 是給父級設定了一些屬性。子級繼承了父級的該屬性,這就是我們css的繼承。但是不是每個屬性都能繼承的。這裡我列舉一些 color font text line 像一些盒子元素,定位元素 浮動 絕對...