給鏈接定義樣式

a:link 表示尚未訪(fǎng)問(wèn)的鏈接，鼠標(biāo)未劃過(guò)和點(diǎn)擊

a:visited 表示已經(jīng)訪(fǎng)問(wèn)的鏈接

a:hover 表示鼠標(biāo)劃入的鏈接

a:active 表示激活的鏈接，也就是鼠標(biāo)點(diǎn)擊鏈接的一瞬間

注意上面這四個(gè)鏈接的偽類(lèi)在使用的時(shí)候要有一定的順序，即上面列舉的順序，否則看不到效果。可以簡(jiǎn)單記為L(zhǎng)OVE(包含link和visited首字母)和HATE(包含hover和active的首字母)。

 

給段落定義樣式

:first-letter 為一行中的第一個(gè)字符創(chuàng)建樣式

:first-line 為一段中第一行創(chuàng)建樣式

 

更多偽類(lèi)和偽元素

:before 可以在指定元素的前面添加內(nèi)容。比如有一個(gè)段落p，你要在前面添加"Hello",可以用偽類(lèi)表示為p:before {content: "Hello";}

:after 和:before一樣，只不過(guò)實(shí)在元素的后面添加內(nèi)容。

但是IE6， IE7不支持content屬性。

:first-child 選取其他元素的第一個(gè)子元素，這里容易引起混淆。比如有下面的一段代碼：

那么，li:frist-child將會(huì)選取所有ul標(biāo)簽下的第一個(gè)li標(biāo)簽，也就是上面兩個(gè)內(nèi)容為第一行的li標(biāo)簽，而不是選擇li標(biāo)簽的第一個(gè)子元素

:focus 這個(gè)偽元素與鏈接的:hover相似，只不過(guò):hover為鏈接專(zhuān)用，而這個(gè)可以用于其他的元素，表示當(dāng)元素獲得焦點(diǎn)時(shí)應(yīng)有的樣式

高級(jí)選擇器
子選擇器

">"可用來(lái)作為子選擇器。當(dāng)要選取一個(gè)元素的子元素時(shí)，可以使用這個(gè)符號(hào)。比如有下面一段代碼：

p>ul 只會(huì)選擇第一個(gè)ul標(biāo)簽，而不會(huì)選擇第二個(gè)ul標(biāo)簽，因?yàn)樗皇莗標(biāo)簽的子元素，而是li標(biāo)簽的子元素。如果要達(dá)到選擇這兩個(gè)ul標(biāo)簽，可以是p ul。這樣p標(biāo)簽下面所有的ul標(biāo)簽都會(huì)被選中。這種形式選取的是p標(biāo)簽下面的所有子孫元素。

同胞選擇器

"+"可用來(lái)作為同胞選擇器。在HTML中，緊挨另一個(gè)標(biāo)簽出現(xiàn)的標(biāo)簽被稱(chēng)為鄰近同胞標(biāo)簽，如：

p標(biāo)簽緊鄰h1標(biāo)簽，因此p標(biāo)簽為h1的同胞標(biāo)簽，可以通過(guò)h1+p來(lái)選擇。

屬性選擇器

在屬性選擇器中，用[]包含要選擇的屬性，如：

img[title]

那么，所有帶有title屬性的img標(biāo)簽都會(huì)被選中，而那些沒(méi)帶title標(biāo)簽的img則不會(huì)被選中。[]括號(hào)前面可以使任何有效的選擇器。

屬性選擇器中的屬性還可以帶有值。比如許多表單元素的形式都一樣，如<input type = "text" />和<input type = "checkbox" />,那么input[type = "text"]可以讓你只選中文本框。

其他的一些屬性選擇器還有：

^=  讓你匹配屬性"以...開(kāi)始"的標(biāo)簽，如:a[href^= "http://"]則匹配所有以http://開(kāi)頭的鏈接。

$=  讓你匹配屬性"以...結(jié)束"的標(biāo)簽，如:a[href$=".com"]則匹配所有以".com"結(jié)尾的鏈接。

*=  讓你匹配屬性包含某一值的標(biāo)簽，如:a[href*= "renren"]則匹配href中包含"renren"的所有鏈接。

最新評(píng)論