CSS常用選擇符和權重

2021-10-05 14:51:52 字數 2201 閱讀 8580

1.css語法

css語法由兩部分組成:選擇符、宣告

語法:選擇符

說明:(1)每個css樣式由兩部分組成,即選擇符和宣告,宣告又分為屬性和屬性值

(2)屬性必須放在花括號中,屬性與屬性值用冒號鏈結

(3)每條宣告用分號結束

(4)當乙個屬性有多個屬性值得時候,屬性值與屬性值不分先後順序

(5)在書寫樣式過程中,空格、換行等操作不影響屬性顯示。

例:

2.常用的選擇符

選擇符表示要定義樣式的物件,可以是元素本身,也可以是一類元素或者制定名稱的元素

常用的選擇符有:

型別選擇符(標記選擇器)、類選擇符(class選擇符)、id選擇符(id選擇器)、偽裝選擇器、群組選擇器(集合選擇器)、萬用字元(*)、偽物件選擇符、包含選擇符(後代選擇器)

元素選擇符/型別選擇符(element選擇器)

語法:元素名稱

說明:元素選擇符就是以文件語言物件型別為選擇器,即使用結構中元素名稱作為選擇符。例如body、div、p、em、strong、span等。所有的頁面元素都可以作為選擇符。

用法:如果想改變某個元素得預設樣式時,可以使用型別選擇符。

當統一文件某個元素的顯示效果時,可以使用型別選擇符。

id選擇符

語法:#id

說明:當我們使用id選擇符時,應該為每乙個元素定義乙個id名

起名時要取英文名,不能用關鍵字:(所有標記和屬性都是關鍵字)

乙個id名稱只能對應文件中乙個具體的元素物件,因為id只能定義頁面中某乙個唯一的元素物件

最大用處:建立頁面外圍結構。

類選擇符(class選擇符)

語法:.class名

說明:當我們使用類選擇符時,應先為每乙個元素定義乙個類名稱

class選擇符更適合定義一類樣式

例:

房東的貓

房東的貓

房東的貓

房東的貓

房東的貓

房東的貓

房東的貓

房東的貓

房東的貓

房東的貓

*萬用字元選擇符

語法:*

說明:通配選擇符的含義就是所有元素,常用來重置樣式

例:當真

當真當真

群組選擇符

語法:選擇符1,選擇符2,選擇符3

說明:當有多個選擇符應用相同的樣式時,可以將選擇符用「,」分隔的方式,合併為一組。

例:白茶清歡無別事

房東的貓

包含選擇符

語法:選擇符1、選擇符2

說明:選擇符1和選擇符2用空格隔開,含義就是選擇符1中包含的所有選擇符2

例:我於殺戮之中綻放,亦如黎明中的花朵

指尖星火,請君共賞

我於殺戮之中綻放,亦如黎明中的花朵

指尖星火,請君共賞

偽類選擇符

語法:例:

說明:

a:link、a:visited、a:hover、a:active,錯誤順序有時候會使超連結的樣式失效

為了簡化**,可以把偽類選擇符中相同的宣告提出來放在a選擇符中

例:

3.選擇符的權重

css中用四位數字表示權重,權重表達方式如:0,0,0,0

型別選擇符權重為:0001

class選擇符權重為:0010

id選擇符權重為:0100

屬性選擇符權重為:0010

偽類選擇符的權重為:0010

偽元素選擇符的權重為:0010

包含選擇符的權重:包含的選擇符權重值之和

內聯樣式的權重為1000

繼承樣式的權重為:0000

當不同選擇符的樣式設定有衝突的時候,高權重選擇符的樣式會覆蓋低權重選擇符的樣式

相同權重的選擇符,樣式遵循就近原則,那個選擇符最後定義,就採用那個選擇符樣式。

例:

CSS選擇符權重

css選擇符有個權重,我們習慣於這樣書寫進行判斷 比如a,b,c,d。style標籤的內聯樣式a 1,id選擇符b 1,class選擇符c 1,標籤 包括偽元素 選擇符d 1。舉個例子 body link 0,0,1,1 body content.link hover 0,0,2,2 body li...

css選擇符種類和權重行

常用的css選擇符有 型別選擇符 標籤選擇符 id選擇符 類選擇符 class選擇符 群組選擇符 包含選擇符 子代選擇器 後代選擇器 偽類選擇器以及萬用字元,共7種 括號裡是表示不同型別的叫法 1 萬用字元主要是用來清除整個頁面的內間距和外間距,具體用在margin 0 padding 0 2 偽類...

CSS 選擇符大全(常用css選擇符)

e 某個元素,如p id 使用id,如 idname class 使用class,如.myclass 萬用字元 包含選擇符 e f e所有的f包含子代,孫代,子子孫孫等等 子選擇符 e相鄰選擇符 e f 和e相鄰的f,相隔乙個都不算 兄弟選擇符 e f 和e同級的f的算 e att e中帶有某個at...