反饋

偽類

鎖定

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

中文名: 偽類
類型: CSS術語

相關概念: 偽類
領域: 計算機

偽類CSS術語

CSS偽類是用來添加一些選擇器的特殊效果。

解釋：在感覺上偽類可以是動態的，當用户和文檔進行交互的時候一個元素可以獲取或者失去一個偽類。例外的是":first-child"能通過文檔樹推斷出來，":lang"在一些情況下也在從文檔樹中推斷出來。

由此可以看出，它的功能和class有些類似，但它是基於文檔之外的抽象，所以叫偽類。^[1]

偽類有：:first-child ，:link:，visited，: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 用於鼠標光標置於其上的連接。

偽類示例

圖1 效果圖

偽類中有代表性的兩個是 ::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所示。