偽類

偽類對元素進行分類是基於特徵(characteristics)而不是它們的名字、屬性或者內容;原則上特徵是不可以從文檔樹上推斷得到的。

基本介紹

  • 中文名:偽類
  • 類型:CSS術語
  • 相關概念:偽類
  • 領域:計算機
CSS術語,釋義,示例,注意,

CSS術語

CSS偽類是用來添加一些選擇器的特殊效果。
解釋:在感覺上偽類可以是動態的,當用戶和文檔進行互動的時候一個元素可以獲取或者失去一個偽類。例外的是":first-child"能通過文檔樹推斷出來,":lang"在一些情況下也在從文檔樹中推斷出來。
由此可以看出,它的功能和class有些類似,但它是基於文檔之外的抽象,所以叫偽類。
偽類有::first-child:link:,vistited,:hover:,:active:focus,:lang,:right,:left,:first
何為偽類?就是css內置類css內部本身賦予它一些特性和功能,也就是你不用再class=...或id=...你就可以直接拿來使用,當然你也可以改變它的部分屬性比如:a:link{color:#FF0000;}
CSS很多的建議並沒有得到瀏覽器的支持,但有四個可以安全用在超鏈接上的偽類。

釋義

偽類(Pseudo classes)是選擇符的螺栓,用來指定一個或者與其相關的選擇符的狀態。它們的形式是selector:pseudo class { property: value; },簡單地用一個半角英文冒號(:)來隔開選擇符和偽類。
CSS很多的建議並沒有得到瀏覽器的支持,但有四個可以安全用在超連結上的偽類。
:link用在未訪問的連線上。
:visited用在已經訪問過的連線上。
:active用於獲得焦點(比如,被點擊)的連線上。
:hover 用於滑鼠游標置於其上的連線。

示例

偽類中有代表性的兩個是 ::after 和 ::before,舉一個例子,比如想做一個如圖1所示的分割線,代碼如下:
圖1 效果圖圖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所示。
圖2 示意圖圖2 示意圖

注意

儘管CSS給予你繞開的控制權,用不同的顏色表示已經訪問過的連線是一個很好的習慣,因為很多用戶還是這樣預期的。偽類(除了hover)不常用,恐怕也沒有過去常用。因此,它沒有過去那樣有用了。但如果你能收集常用用戶的意見,你會發現應該使用它。
傳統上,連線文本是藍色的,已訪問的連線是紫色的。也許,這是最有效、最有用的顏色。然而,伴隨著CSS的廣泛發展,這種顏色不會是平常的了,用戶也不再假設連線必須是藍色或紫色的。
注意
你應該也可以在除了連線的其他元素上使用hover偽類。不幸的是,Internet Explore並不支持。這真是一個極大的煩惱,因為在其它瀏覽器上可以有很多小技巧讓你的頁面看起來更令人愉快。

相關詞條

熱門詞條

聯絡我們