CSS疑似クラス
CSS 疑似クラス -- 疑似クラス
CSS 疑似クラスは CSS セレクターの一部です。
疑似クラス名は大文字と小文字が區(qū)別されます。大文字と小文字は區(qū)別されません。 HTML ドキュメントと XML ドキュメントでは、中と小文字が區(qū)別されます
英語(yǔ)の擬似クラスは Pseudo-Classes です
CSS のスタイルと HTML ドキュメントの要素の間の接続は、通常、ドキュメント內(nèi)の要素の位置に基づいています。この方法はほとんどのニーズを満たします。ただし、HTML ドキュメント構(gòu)造の制限により、特定のユーザー アクションによってトリガーされるイベントなど、一部の効果は実現(xiàn)できません。例をいくつか示します。
ユーザーが HTML 要素にマウスを移動(dòng)したとき
HTML 要素を離れる。
HTML 要素のクリック
疑似クラスは、要素や未訪問(wèn)のリンクに対するユーザーのマウスクリックなど、ドキュメントのステータスの変更や動(dòng)的イベントなどに使用できます
疑似クラスは、要素を名前で分類(lèi)します。 、屬性またはコンテンツ。原則としてHTML文書(shū)では得られない機(jī)能です
CSS :link pseudo-class
:link -- ユーザーが訪問(wèn)していないリンクに適したCSS :link pseudo-class
構(gòu)文: : link
CSSバージョン:CSS1
説明:
ユーザーが訪問(wèn)していないリンクに適用
ユーザー端末(例:ブラウザ)は通常、未訪問(wèn)のリンクと訪問(wèn)済みのリンクを區(qū)別します。CSSは疑似クラスを提供します。 : link と :visited は、2 つのステータス リンクを區(qū)別するために使用されます
未訪問(wèn)のリンクと訪問(wèn)済みのリンクは相互に排他的です
中國(guó)語(yǔ)で「リンク」の意味であるリンク
指定されたリンクの色を設(shè)定します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :link 偽類(lèi)示例，對(duì)指定鏈接設(shè)置顏色</title>
<style type="text/css" media="all">
a.dreamdu:link
{
color:green;
}
</style>
</head>
<body>
<p><a href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a></p>
<p><a class="dreamdu" href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a></p>
<p><a href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a></p>
</body>
</html>CSS : Visited pseudo-class
構(gòu)文: :visited
CSS バージョン: CSS1
參考 URL: http://www.dreamdu.com/css/pseudo-class_visited/
説明:
以下のリンクに適用されます。ユーザーが訪問(wèn)したことがある
ユーザー端末 (ブラウザなど) は、通常、未訪問(wèn)のリンクと訪問(wèn)済みのリンクを異なる方法で表示します。CSS は、2 つの狀態(tài)のリンクを區(qū)別するために、link と :visited を提供します。相互に排他的な
visited、中國(guó)語(yǔ)の「訪問(wèn)」を意味する
構(gòu)文
: Visited
a:visited
a.class:visited
例
a:visited
{
色: 緑;
}
上記で定義された訪問(wèn)済みリンク スタイルは緑色です
どの要素がハイパーリンクのソース チェーンであるかは、ドキュメント言語(yǔ)によって決まります。たとえば、HTML では、リンク擬似クラスは href 屬性を持つ要素に適用されます。したがって、次の 2 つの CSS 宣言は同等です
a:visited
{
color: green;
}
:visited
{
color: green;
}
ヒント:以下の例を見(jiàn)る前に、ブラウザはアクセス情報(bào)を記録します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :visited 偽類(lèi)示例，設(shè)置已訪問(wèn)鏈接的顏色</title>
<style type="text/css" media="all">
a:link
{
color:red;
}
a:visited
{
color:green;
}
</style>
</head>
<body>
<p><a href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a></p>
<p><a href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a></p>
</body>
</html>CSS :hover pseudo-class
は要素を指すカーソル(マウスポインタ)に適していますが、要素がアクティブ化されていない場(chǎng)合のこのスタイル
構(gòu)文: :hover
CSS バージョン: CSS2
説明:
カーソル (マウス ポインター) が要素を指す場(chǎng)合に適用されますが、この要素は有効化されていません
クライアント (ブラウザー) は、ユーザーの操作に応じてレンダリング効果を変更できます。CSS は、この狀況に対応する 3 つの疑似クラスを提供します: hover、active、focus
上記の 3 つの疑似クラスは相互に排他的ではなく、要素です。それらのいくつかは同時(shí)に適用できます
:hover 擬似クラスは、ユーザーが要素をポイントする場(chǎng)合、たとえばユーザーのマウスが段落 p をポイントする場(chǎng)合に適しています。ユーザーのマウスが要素から離れると、要素の元のスタイル表示が復(fù)元されます
hover (中國(guó)語(yǔ)で「滯在、ホバー」を意味します)
文法
:hover
a:hover
a.class:hover
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :hover 偽類(lèi)示例</title>
<style type="text/css" media="all">
a:hover
{
color:yellow;
background:blue;
font-size:small;
}
p:hover
{
color:yellow;
background:blue;
font-size:large;
}
div:hover
{
color:red;
background:lime;
font-size:small;
}
</style>
</head>
<body>
<a href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a>
<p>IE6、IE7(Q)、IE8(Q)不支持除了連接之外元素的hover偽類(lèi)</p>
<div>IE6、IE7(Q)、IE8(Q)不支持除了連接之外元素的hover偽類(lèi)</div>
</body>
</html>アンカー擬似クラス
CSS をサポートするブラウザでは、リンクのさまざまな狀態(tài)をさまざまな方法で表示できます
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :anchor 偽類(lèi)示例</title>
<style>
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
</head>
<body>
<p><b><a href="#" target="_blank">這是一個(gè)鏈接</a></b></p>
<p><b>注意：</b> a:hover 必須在 a:link 和 a:visited 之后，需要嚴(yán)格按順序才能看到效果。</p>
<p><b>注意：</b> a:active 必須在 a:hover 之后。</p>
</body>
</html>注: CSS 定義では、a:hover を a:link の間に配置する必要がありますa :visited の後にのみ有効です。
注: CSS 定義では、a:active を有効にするには、a:hover の後に配置する必要があります。
注: 疑似クラス名では大文字と小文字が區(qū)別されません。
CSS :first-child疑似クラス
構(gòu)文：:first-child
CSSバージョン：CSS2
參考URL：http://www.dreamdu.com/css/pseudo-class_first-child/
説明:
他の要素の最初の子要素と一致します。 例: div には複數(shù)の p 要素が含まれています。次を使用できます。 first-child 擬似クラス
first、中國(guó)語(yǔ)の「最初」は意味します。 ; child、中國(guó)語(yǔ)での「子、子ノード」の意味
文法
: first-child
E: first-child
例
p > first-child
{
color:lime;
background:red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)</title>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>這是個(gè)測(cè)試</p>
<p>這是個(gè)測(cè)試</p>
<p><b>注意:</b>對(duì)于 :first-child 工作于 IE8以及更早版本的瀏覽器, DOCTYPE必須已經(jīng)聲明.</p>
</body>
</html>CSS :lang pseudo-class
:lang pseudo-class を使用すると、次の定義を定義できます。さまざまな言語(yǔ) 特別ルール
注: IE8 では、;lang 疑似クラスをサポートするために <!DOCTYPE> を宣言する必要があります。
りー
