HTML之CSS選擇符

2021-08-26 18:42:29 字數 2122 閱讀 2397

css選擇符:

型別選擇符:型別選擇符就是網頁元素本身,定義時直接使用元素名稱

body

divid選擇符:它是唯一的,不同元素的id值是不能重複的,id選擇符為每個元素的具體物件定義不同的樣式,方便使用者更加精細的控制頁面。使用id選擇器時要先為每個元素定義乙個id屬性

使用id選擇器是,需要使用到#進行標識:

#top

class選擇符:在乙個文件中可以為不同型別的元素定義相同的類名,class可以實現把相同樣式的元素統一為一類;使用class選擇器時要先為每個元素定義乙個class屬性:

使用class選擇器時,需要使用英文.(點)進行標識:

.red

通用選擇符:是一種特殊的選擇符,它用*符號表示,是乙個實用但又容易忽略的選擇符。

*分組選擇符:分組選擇符不是一種選擇符型別,而是一種選擇符方法。當多個物件定義了相同的樣式時,我們可以把他們分為一組。這樣能簡化**讀寫eg:

.class1

.class2

可以分組為:

.class1,class2

.class1

.class2

使用分組有二個原則:1.方便原則2.就近原則(如果幾個元素相鄰,在乙個模組內可以考慮使用分組選擇符)

包含選擇符:最有用的一類選擇符,它能夠簡化**,實現大範圍的樣式控制eg

.div1 h2

.div1 p

元素指定選擇符:有時候我們希望控制某種元素在一定範圍內物件的樣式,這時可以把class或id選擇符結合起來使用eg:

span.red

div#top

eg:在上面**中要使用news選擇符很顯然不行,直接使用p,h2型別選擇符也不太好這時變可以使用元素指定選擇符

p.news{}h2.news{}span.news{}

子物件選擇符:與元素選擇符一樣都是限制選擇符,即在一定元素範圍內定義符合限制條件的元素樣式,元素指定選擇符是用class和id屬性做為限制條件

#main > table

#main > .title

屬性選擇符:屬性選擇符是在元素後面加乙個中括號,中括號中列出各種屬性,或者表示式,屬性選擇符存在7種具體形式:

1.存在屬性匹配:通過匹配存在的屬性來控制元素的樣式,一般把要匹配的屬性包含在中括號中,只列舉姓名便不賦值

h1[class]

img[alt]

a[href][title]

2.精準屬性匹配:只有當屬性值完全匹配指定的屬性值時才會應用樣式,id和class選擇器實際上就是精準屬性選擇器

a[href = "

www.163.com"][title

="網易"]

3.空白分隔匹配:通過為屬性定義字串列表,然後只要匹配其中任意乙個字串即可控制元素樣式

誰來控制我的樣式

可以使用下面樣式來控制:

[class^="a"]或:

[class^="a"]或:

[class^="b"]或:

[class^="c"]或:

span[class^="c"]

4.連字元匹配:與空白匹配的功能和用法都相同,但是連字元匹配中的字串列表中用連字元進行分割

誰來控制我的樣式

可以使用下面樣式來控制:

[class|="a"]或:

[class|="a"]或:

[class|="b"]或:

[class|="c"]或:

span[class|="c"]

5.字首選擇符:只要屬性值的開始字元匹配指定字串,即可對元素應用樣式。字首匹配使用[^=]形式來實現

字首匹配

可使用如下樣式控制

[class ^="my"]

6.字尾匹配:與字首相反,只要屬性值的結尾字元匹配指定字元,使用[$=]形式控制

字尾匹配

可使用如下樣式控制

[class $="test"]

7.子字串匹配:只要屬性值中存在指定字串即應用樣式,使用[*=]形式控制

字尾匹配

可使用如下樣式控制

[class *="est"]

div+p

eg:要單獨控制最下的p元素除非為他定義乙個class和id屬性如果使用使用相鄰選擇符就可以做到

#sub_wrap+p

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