首頁 > web前端 > css教學 > css偽類怎麼用

css偽類怎麼用

藏色散人
發布: 2019-06-03 16:41:41
原創
4138 人瀏覽過

css偽類怎麼用

css偽類別怎麼用?

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

偽類別的語法:

1

selector:pseudo-class {property:value;}

登入後複製

CSS類別也可以使用偽類別:

1

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

登入後複製

anchor偽類別

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

實例

1

2

3

4

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 之後,才是有效的。

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

偽類別和CSS類別

偽類別可以與CSS 類別配合使用:

1

2

a.red:visited {color:#FF0000;}

<a class="red" href="css-syntax.html">CSS 语法</a>

登入後複製

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

CSS :first-child 偽類別

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

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

符合第一個

元素

在下面的範例中,選擇器符合作為任何元素的第一個子元素的

元素:

實例

1

2

3

4

p:first-child

{

    color:blue;

}

登入後複製

符合所有

元素中的第一個 元素

在下面的範例中,選擇相符的所有 元素:

實例

1

2

3

4

<i>p > i:first-child

{

    color:blue;

}</i>

登入後複製

符合所有作為第一個子元素的

元素中的所有 元素

在下面的範例中,選擇器符合所有作為元素的第一個子元素的

元素中的所有 元素:

實例

1

2

3

4

<i><i><i>p:first-child i

{

    color:blue;

}</i></i></i>

登入後複製

CSS - :lang 偽類別

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

注意:IE8必須宣告< ;!DOCTYPE>才能支援;lang偽類。

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

實例

1

<i><i><i>q:lang(no) {quotes: "~" "~";}</i></i></i>

登入後複製

以上是css偽類怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板