css樣式繼承體現

2021-08-10 08:18:21 字數 1351 閱讀 9664

css樣式繼承體現

選擇器再講解(4+3+3+*)

四個基本選擇器

通用選擇器:*

標籤選擇器:

標籤名

id選擇器:   #

id名

類名選擇器:.類名

類就是被重用的,乙個標籤可以有多個類,乙個類可以用在多個標籤上

ps:掛類法編寫樣式

三套複雜選擇器格式

(e、f為基本選擇器)

後代選擇器:

e(有空格

)f 空格表示後代,多層選擇,不固定層次

交集選擇器:

e(沒有空格

)f 不用任何字元隔開,後面的選擇器一般是class或者id

並集選擇器:

e(逗號隔開)f

三個非常用選擇器:(e、f為基本選擇器)

子元素選擇器:e>f

右尖括號,符合f選擇器的所有e子元素

直接相鄰選擇器:e+f

+號表示緊鄰,當前選中元素後緊跟的後續乙個元素

普通相鄰選擇器:e~f

~兄弟後續元素,當前選中元素後的所有符合f選擇器的元素

偽類選擇:(e、f為基本選擇器)

超連結選擇::link、:visited、:hover、:active

第乙個子元素:e:first-child

偽物件/偽元素選擇:(e、f為基本選擇器)

文字選擇:e::first-letter、e::first-line

插入內容:e::before、e::after

繼承性相關說明

定義:有些樣式屬性,在給指定標籤設定的時候,同時也給後代設定了,此性質就是繼承性

條件:繼承到樣式的標籤和定義樣式的標籤必須是從屬關係(後代標籤關係)

對文字樣式設定的基本屬性才能被繼承(顏色color\樣式text\字型font\行屬性line)

所有關於對於盒子模型(div、span等)的屬性設定(border、定位、布局)都不能被繼承

css層疊性的相關說明

層疊性指的是樣式的優先順序,當產生衝突時以優先順序高的為準

判斷選擇器的層疊效果:

1、通過權值判斷法

2、通過每乙個選擇其中的id選擇、類選擇、標籤選擇數量來計做權值(ice)(id>類》標籤)

3、先比較id權值,再次比較類、最後比較標籤

4、全部一樣比較順序

注意:數權值前提是一定要保證每一條選擇器必須要選中的指定元素

權值判定注意點

1、看是否所有的選擇器都選中了指定標籤,如果全部選中就數權值

2、如果沒有選中,則遵循就近原則

3、都選中同一級別,則看個體元素的權值

補充說明:important優先順序最高,*優先順序最低

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 樣式繼承 inherit 屬性

在css中,子元素會繼承了父元素的一些樣式屬性。能夠繼承到子類的樣式屬性非常有限,僅是文字 字型 顏色.子類如果還想繼承父類的屬性,可以通過inherit強制繼承。通過編輯器做了個合同管理的系統,要求就是上傳的合同展示在頁面上必須幾乎相同 並且需要在瀏覽器上能填寫合同,由於編輯器用的一般是和標籤 為...

CSS預設可繼承樣式

一直想總結出乙份可繼承樣式的列表。常聽說,顏色和字型是可繼承的,盒模型樣式是不可繼承的,但其他樣式呢?本文內容包括所有可繼承的樣式 color cursor direction font letter spacing line height list style text align text in...