CSS 僞類(Pseudo-classes)

時間 2019-11-17

標籤 css pseudo classes 欄目 CSS 简体版

原文原文鏈接

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

語法

僞類的語法：css

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

CSS類也能夠使用僞類：瀏覽器

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

anchor僞類

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

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

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

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

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

僞類和CSS類

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

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

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

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

CSS - :first - child僞類

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

注意：在IE8的以前版本必須聲明<!DOCTYPE> ，這樣 :first-child 才能生效。

匹配第一個 元素

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

<html>
<head>
<style>
p:first-child
{
color:blue;
} 
</style>
</head>

<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>

匹配全部 元素中的第一個 元素

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

<html>
<head>
<style>
p > i:first-child
{
color:blue;
} 
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>

CSS - :lang 僞類

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

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

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

<html>
<head>
<style>
q:lang(no) {quotes: "~" "~";}
</style>
</head>

<body>
<p>Some text <q>A quote in a paragraph</q> Some text.</p>
</body>
</html>