教你玩轉CSS 僞類

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

語法：

僞類的語法:

    selector:pseudo-class {property:value;}

 

CSS類也能夠使用僞類：

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

 

1.anchor僞類

在支持 CSS 的瀏覽器中，連接的不一樣狀態均可以以不一樣的方式顯示

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

 

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

注意： 在 CSS 定義中，a:active 必須被置於 a:hover 以後，纔是有效的。

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

2.僞類和CSS類

僞類能夠與 CSS 類配合使用：

    a.red:visited {color:#FF0000;}
     
    <a class="red" href="css-syntax.html">CSS 語法</a>

 

若是在上面的例子的連接已被訪問，它會顯示爲紅色。

---

 

1、CSS :first-child 僞類

您能夠使用 :first-child 僞類來選擇父元素的第一個子元素。

（1）匹配第一個 <p> 元素

在下面的例子中，選擇器匹配做爲任何元素的第一個子元素的 <p> 元素：

    p:first-child{
        color:blue;
    }

（2）匹配全部 <p> 元素中的第一個 <i> 元素

在下面的例子中，選擇相匹配的全部 <p>元素的第一個 <i> 元素：

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

 

（3）匹配全部做爲第一個子元素的 <p> 元素中的全部 <i> 元素

在下面的例子中，選擇器匹配全部做爲元素的第一個子元素的 <p> 元素中的全部 <i> 元素：

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

 

2、CSS - :lang 僞類

:lang 僞類使你有能力爲不一樣的語言定義特殊的規則

注意：IE8必須聲明 <!DOCTYPE>才能支持;lang僞類。

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

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

 

---

 

全部CSS僞類/元素