CSS中常見的選擇符

2021-10-03 04:26:53 字數 2400 閱讀 3112

css樣式由兩部分組成,分別是選擇符和宣告。其中宣告由屬性和屬性值組成

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

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

語法:標籤名稱

型別選擇符是根據html語言中的標記來直接定義

說明:型別選擇符就是網頁元素本身,定義時直接使用元素名稱,即使用結構中標籤名稱作為選擇符。

所有的頁面標籤都可以作為型別選擇符img,div,a,span,em。

用法:p

如果你想要改變乙個元素的預設樣式時,使用型別選擇符

如果你想統一頁面中某個元素的顯示樣式時,使用型別選擇符

id選擇符

語法:#id名

說明:id選擇符可對元素進行乙個id名稱的指派,id的基本作用是對每乙個頁面中的唯一出現的元素進行樣式定義。

在使用id選擇符前我們應先為元素定義乙個id屬性。

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

如:

2、id選擇符的語法格式是「#」加上自定義的id名;

如:#box

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

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

5、最大的用處:建立網頁的外圍結構

用法示例

html:

css:#top

class(類)選擇符

語法:.類(class)名

說明:對同類標籤進行不同的樣式設定

對不同類的標籤進行同樣的樣式設定

用法:css:.txt

html:1111

222

333

萬用字元語法:*

說明:通配選擇符的寫法是「*」,其含義就是所有元素。用法:常用來重置樣式。

*將所有元素的邊界值和填充值清0。

margin:0 auto;使元素居中(誰居中給誰加)

群組選擇符

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

對一組元素進行相同的樣式指定,例如:

h1,h2,h3,p

使用逗號對選擇符進行分離,對頁面中使用相同樣式的地方只需書寫一次樣式即可,可減少**量,改善css**的結構。

包含選擇符

語法:父元素 子元素 ……

包含選擇符指選擇符組合中前一標籤包含後乙個標籤,之間用空格空開。

利用包含選擇符可以避免過多的使用class及id的設定,

並且直接對所需要設定的元素進行了樣式設定。

包含選擇符除了可以二者包含,也可以多級包含

子選擇符

語法:父元素 > 子元素

不希望選擇任意的後代元素,而是希望縮小範圍,只選擇某個元素的子元素

偽類選擇符

語法 :

a:link超連結的初始狀態;

a:visited超連結被訪問後的狀態;

a:hover滑鼠劃過超連結時的狀態;

a:active即滑鼠按下時超連結的狀態;

說明:1)當這4個超連結偽類選擇符聯合使用時,應注意他們的順序,正常順序為:a:link,a:visited,a:hover,a:active,錯誤的順序有時會使超連結的樣式有些部分失效;

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

例如:a a:hover 表示超連結的三種狀態都相同,只有滑鼠劃過變顏色。

選擇符的權重

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

型別、標籤選擇符的權重為0001 a p div span form … 1

class選擇符的權重為0010 .class 10

id選擇符的權重為0100 # 100

子選擇符的權重為0000

屬性選擇符的權重為0010

偽類選擇符的權重為0010

偽元素選擇符的權重為0001

包含選擇符的權重:為所包含選擇符的權重之和

內聯樣式的權重為1000

繼承樣式的權重為0000

注:如果權重相同時,則執行後寫的樣式;

css層疊性

乙個元素可能同時被多個css選擇器選中,每個選擇器都有一些css規則,這就是層疊。

這些規則有可能不矛盾的,自然這些規則將會同時起效,然而有些規則是相互衝突的。當發生衝突的時候必須選出一條最高特殊性(權重)的規則來應用。

CSS選擇符 屬性選擇符

使用屬性選擇器可以篩選出設定了特定屬性的標籤。例如選取所有設定了title屬性的 img title 這種選擇符的第一部分是標籤名 img 隨後是屬性名,放在方括號裡 title css不限制屬性選擇符只能使用標籤名,也可以使用類。例如 photo title 用於選取類為photo,而且設定了ti...

CSS選擇符 型別選擇符

h1用於選取特定html標籤的選擇符,叫型別選擇符或元素選擇符。這種選擇符的作用特別大。能把樣式應用到網頁中的每個目標標籤上。使用這種選擇符,只需少量工作就能大幅修改網頁的外觀。假如想讓網頁中每個段落都使用相同的字型 顏色和字型大小,只需編寫乙個選擇符為p 表示標籤 的樣式即可。html 最基本的佐...

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...