CSS術語
CSS偽類是用來添加一些選擇器的特殊效果。
解釋:在感覺上偽類可以是動態的,當用戶和文檔進行互動的時候一個元素可以獲取或者失去一個偽類。例外的是":first-child"能通過文檔樹推斷出來,":lang"在一些情況下也在從文檔樹中推斷出來。
由此可以看出,它的功能和class有些類似,但它是基於文檔之外的抽象,所以叫偽類。
何為偽類?就是css內置類css內部本身賦予它一些特性和功能,也就是你不用再class=...或id=...你就可以直接拿來使用,當然你也可以改變它的部分屬性比如:a:link{color:#FF0000;}
CSS很多的建議並沒有得到瀏覽器的支持,但有四個可以安全用在
超鏈接上的偽類。
釋義
偽類(Pseudo classes)是
選擇符的螺栓,用來指定一個或者與其相關的選擇符的狀態。它們的形式是selector:pseudo class { property: value; },簡單地用一個
半角英文
冒號(:)來隔開選擇符和偽類。
CSS很多的建議並沒有得到瀏覽器的支持,但有四個可以安全用在超連結上的偽類。
:link用在未訪問的連線上。
:visited用在已經訪問過的連線上。
示例
偽類中有代表性的兩個是 ::after 和 ::before,舉一個例子,比如想做一個如圖1所示的分割線,代碼如下:
<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <style type="text/css"> p{ text-align:center; } p:after, p:before{ content:""; position:absolute; height:2px; width:200px; } p:after{ right:0; background-color:red; } p:before{ left:0; background-color:green; } </style> <title>test</title> </head> <body> <p> 測試 </p> </body></html>
使用chrome瀏覽器查看原始碼會發現有::before和::after提示,如圖2所示。
注意
儘管
CSS給予你繞開的控制權,用不同的
顏色表示已經訪問過的
連線是一個很好的習慣,因為很多用戶還是這樣預期的。偽類(除了
hover)不常用,恐怕也沒有過去常用。因此,它沒有過去那樣有用了。但如果你能收集常用用戶的意見,你會發現應該使用它。
傳統上,連線文本是藍色的,已訪問的連線是紫色的。也許,這是最有效、最有用的顏色。然而,伴隨著CSS的廣泛發展,這種顏色不會是平常的了,用戶也不再假設連線必須是
藍色或紫色的。
注意
你應該也可以在除了連線的其他元素上使用hover偽類。不幸的是,Internet Explore並不支持。這真是一個極大的煩惱,因為在其它瀏覽器上可以有很多小技巧讓你的頁面看起來更令人愉快。