CSS偽類

偽類 是用來新增一些選擇器的特殊效果。

偽類
選擇元素基於的是當前元素處於的狀態，或者說元素當前所具有的特性，而不是元素的id、class、屬性等靜態的標誌。由於狀態是動態變化的，所以一個元素達到一個特定狀態時，它可能得到一個偽類的樣式；當狀態改變時，它又會失去這個樣式。由此可以看出，它的功能和class有些類似，但它是基於文件之外的抽象，所以叫偽類。

所有CSS偽類

1. :active ： 向被啟用的元素新增樣式。
2. :focus ： 向擁有鍵盤輸入焦點的元素新增樣式。
3. :hover ： 當滑鼠懸浮在元素上方時，向元素新增樣式。
4. :link ： 向未被訪問的連結新增樣式。
5. :visited
   ： 向已被訪問的連結新增樣式。
6. :first-child ： 向元素的第一個子元素新增樣式。
7. :lang ： 向帶有指定 lang 屬性的元素新增樣式。

一、語法

偽類的語法：

    selector:pseudo-class {property:value;}

CSS類也可以使用偽類：

    selector.class:pseudo-class {property:value;}

二、錨偽類

在支援 CSS 的瀏覽器中，連結的不同狀態都可以以不同的方式顯示

    a:link {color:#FF0000;} /* 未訪問的連結 */
    a:visited {color:#00FF00;} /* 已訪問的連結 */
    a:hover {color:#FF00FF;} /* 滑鼠劃過連結 */
    a:active {color:#0000FF;} /* 已選中的連結 */
 

嘗試一下 »

注意： 在CSS定義中，a:hover 必須被置於 a:link 和 a:visited 之後，才是有效的。a:active 必須被置於
a:hover 之後，才是有效的。

注意： 偽類的名稱不區分大小寫。

偽類和CSS類

偽類可以與 CSS 類配合使用：

    a.red:visited {color:#FF0000;}
    [CSS 語法](css-syntax.html)

如果在上面的例子的連結已被訪問，它會顯示為紅色。

三、CSS :first-child 偽類

您可以使用 :first-child 偽類來選擇父元素的第一個子元素。

注意： 在IE8的之前版本必須宣告 ，這樣 :first-child 才能生效。

（1）匹配第一個 元素

在下面的例子中，選擇器匹配作為任何元素的第一個子元素的 元素：

    p:first-child
    {
        color:blue;
    }

嘗試一下 »

（2）匹配所有元素中的第一個 元素

在下面的例子中，選擇相匹配的所有元素的第一個 元素：

    p > i:first-child
    {
        color:blue;
    }

嘗試一下 »

（3）匹配所有作為第一個子元素的元素中的所有元素

在下面的例子中，選擇器匹配所有作為元素的第一個子元素的元素中的所有元素：

    p:first-child i
    {
        color:blue;
    }

嘗試一下 »

四、CSS - :lang 偽類

:lang 偽類使你有能力為不同的語言定義特殊的規則

注意：IE8必須宣告才能支援;lang偽類。

在下面的例子中，:lang 類為屬性值為 no 的q元素定義引號的型別：

    q:lang(no) {quotes: "~" "~";}

嘗試一下 »