CSS的選擇符

2022-06-16 05:00:17 字數 3057 閱讀 9530

1.通配選擇符(universal selector)

通配選擇符(以*表示)起萬用字元的作用,意思是將選擇其轄域內的所有元素。

改變整個文件的字型大小和顏色:

*

改變table下所有元素的顏色及對齊方式:

table *

2.型別選擇符(type selectors)

以文件語言物件(element)型別作為選擇符。

設定td背景色與字型顏色:

td

設定a標籤無下劃線等裝飾效果:

a

3.屬性選擇符(attribute selectors)

這個屬性用的不是很多,原因是在ie6下都還不能支援,不過在firefox下可以支援。

它有4種表達形式:

(1) element[att]  選擇具有att屬性的element元素

用input插入的任何元素,只要指定了name值,其值為紅色:

(2) element[att=value]   選擇具有att屬性,且屬性值等於value的元素

(3) element[att~=value]   選擇具有att屬性,且屬性值為用空格分割的字詞列表,其中乙個等於value的元素

下面的例子,只有第乙個用空格分開的"關羽",才能被匹配到:

(4) element[att|=value]    選擇具有att屬性且屬性值為一用連字元分隔的字詞列表,由value開始的元素

下面的例子,只有第乙個有連字元"-"的"趙雲",才能被匹配到:

4.包含選擇符(descendant selectors)

選擇所有被element1包含的子元素:

element1 element2

設定table下所有td的顏色與對齊方式:

table td

設定p元素內的strong元素的顏色:

p strong

5.子物件選擇符(child selectors)

這個屬性在ie6下也支援不了,它和包含選擇符非常相似,但區別在於:在多層包含關係中,它只能包含一級;而包含選擇符能包含多級。

element1>element2

假如有這樣乙個結構的包含關係:

生子當如孫仲謀

那麼再看下面的定義,我們設定如果文字顏色變為紅色為匹配生效:

div p 

div strong

div>strong

p>strong

6.id選擇符(id selectors)

以文件目錄樹(dom)中作為物件的唯一標示符id作為選擇符

#id

7.類選擇符(class selectors)

以類名作為選擇符,其效果等同於屬性選擇符的element[class~="classname"]

element.classname

治世之能臣

亂世之奸雄

8.分組選擇符(grouping)

將同樣的定義應用於多個選擇符,可以將選擇符以逗號分割的方式並為組

element1,element2,element3

<

style

>

div,h1

p,h2

style

>

<

div>

大江東去,浪淘盡,千古風流人物

<

p>古壘西邊,人道是:三國周郎赤壁

p>

<

h1>亂石穿空,驚濤拍岸,捲起千堆雪

h1>

<

h2>江山如畫,一時多少豪傑

h2>

div>

9.偽類及偽物件選擇符(pseudo selectors)

偽類主要是爭對a的幾個狀態:

a:link、a:visited、a:hover、a:active

其實也有諸如span:hover這樣的用法,但ie下不支援非a元素的偽類

偽物件一共有4個:

:first-letter、:first-line、:before、:after

<

style

>

div:first-letter

div:first-line

style

>

<

div>

水調歌頭 【宋】蘇軾

<

br>

明月幾時有?把酒問青天。不知天上宮闕,今夕是何年。我欲乘風歸去,又恐瓊樓玉宇,高處不勝寒, 起舞弄清影,何似在人間。

<

br>

轉朱閣,抵綺戶,照無眠。不應有恨,何事偏向別時圓。人有悲歡離合,月有陰晴圓缺,此事古難全。 但願人長久,千里共嬋娟。

<

br>

div>

執行示例,在ie和firefox下都能顯示出效果。

<

style

>

p:before

p:after

style

>

<

p><

br>"臣本布衣,躬耕南陽,苟全性命於亂世,不求聞達於諸侯。"<

br>

p>

執行示例,ie不能顯示出效果,在firefox下可以。

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