給鏈接定義樣式

a:link 表示尚未訪問的鏈接，鼠標(biāo)未劃過和點擊

a:visited 表示已經(jīng)訪問的鏈接

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

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

注意上面這四個鏈接的偽類在使用的時候要有一定的順序，即上面列舉的順序，否則看不到效果?？梢院唵斡洖長OVE(包含link和visited首字母)和HATE(包含hover和active的首字母)。

 

給段落定義樣式

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

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

 

更多偽類和偽元素

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

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

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

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

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

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

高級選擇器
子選擇器

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

p>ul 只會選擇第一個ul標(biāo)簽，而不會選擇第二個ul標(biāo)簽，因為它不是p標(biāo)簽的子元素，而是li標(biāo)簽的子元素。如果要達(dá)到選擇這兩個ul標(biāo)簽，可以是p ul。這樣p標(biāo)簽下面所有的ul標(biāo)簽都會被選中。這種形式選取的是p標(biāo)簽下面的所有子孫元素。

同胞選擇器

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

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

屬性選擇器

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

img[title]

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

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

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

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

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

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

最新評論