CSS疑似クラス

CSS 疑似クラス -- 疑似クラス

CSS 疑似クラスは CSS セレクターの一部です。

疑似クラス名は大文字と小文字が区別されます。大文字と小文字は区別されません。 HTML ドキュメントと XML ドキュメントでは、中と小文字が区別されます

英語の擬似クラスは Pseudo-Classes です

CSS のスタイルと HTML ドキュメントの要素の間の接続は、通常、ドキュメント内の要素の位置に基づいています。この方法はほとんどのニーズを満たします。ただし、HTML ドキュメント構造の制限により、特定のユーザーアクションによってトリガーされるイベントなど、一部の効果は実現できません。例をいくつか示します。

ユーザーが HTML 要素にマウスを移動したとき

HTML 要素を離れる。

HTML 要素のクリック

疑似クラスは、要素や未訪問のリンクに対するユーザーのマウスクリックなど、ドキュメントのステータスの変更や動的イベントなどに使用できます

疑似クラスは、要素を名前で分類します。、属性またはコンテンツ。原則としてHTML文書では得られない機能です

CSS :link pseudo-class

:link -- ユーザーが訪問していないリンクに適したCSS :link pseudo-class

構文: : link

CSSバージョン:CSS1

説明:

ユーザーが訪問していないリンクに適用

ユーザー端末(例:ブラウザ)は通常、未訪問のリンクと訪問済みのリンクを区別します。CSSは疑似クラスを提供します。 : link と :visited は、2 つのステータスリンクを区別するために使用されます

未訪問のリンクと訪問済みのリンクは相互に排他的です

中国語で「リンク」の意味であるリンク

指定されたリンクの色を設定します:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :link 伪类示例，对指定链接设置颜色</title>
<style type="text/css" media="all">
a.dreamdu:link
{
color:green;
}
</style>
</head>
<body>
<p><a href="http://www.php.cn">点击跳转</a></p>
<p><a class="dreamdu" href="http://www.php.cn">点击跳转</a></p>
<p><a href="http://www.php.cn">点击跳转</a></p>
</body>
</html>

CSS : Visited pseudo-class

構文: :visited

CSS バージョン: CSS1

参考 URL: http://www.dreamdu.com/css/pseudo-class_visited/

説明:

以下のリンクに適用されます。ユーザーが訪問したことがある

ユーザー端末 (ブラウザなど) は、通常、未訪問のリンクと訪問済みのリンクを異なる方法で表示します。CSS は、2 つの状態のリンクを区別するために、link と :visited を提供します。相互に排他的な

visited、中国語の「訪問」を意味する

構文

: Visited

a:visited

a.class:visited

例

a:visited

{

色: 緑;

}

上記で定義された訪問済みリンクスタイルは緑色です

どの要素がハイパーリンクのソースチェーンであるかは、ドキュメント言語によって決まります。たとえば、HTML では、リンク擬似クラスは href 属性を持つ要素に適用されます。したがって、次の 2 つの CSS 宣言は同等です

a:visited

{

color: green;

}

:visited

{

color: green;

}

ヒント:以下の例を見る前に、ブラウザはアクセス情報を記録します

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :visited 伪类示例，设置已访问链接的颜色</title>
<style type="text/css" media="all">
a:link
{
color:red;
}
a:visited
{
color:green;
}
</style>
</head>
<body>
<p><a href="http://www.php.cn">点击跳转</a></p>
<p><a href="http://www.php.cn">点击跳转</a></p>
</body>
</html>

CSS :hover pseudo-class

は要素を指すカーソル(マウスポインタ)に適していますが、要素がアクティブ化されていない場合のこのスタイル

構文: :hover

CSS バージョン: CSS2

説明:

カーソル (マウスポインター) が要素を指す場合に適用されますが、この要素は有効化されていません

クライアント (ブラウザー) は、ユーザーの操作に応じてレンダリング効果を変更できます。CSS は、この状況に対応する 3 つの疑似クラスを提供します: hover、active、focus

上記の 3 つの疑似クラスは相互に排他的ではなく、要素です。それらのいくつかは同時に適用できます

:hover 擬似クラスは、ユーザーが要素をポイントする場合、たとえばユーザーのマウスが段落 p をポイントする場合に適しています。ユーザーのマウスが要素から離れると、要素の元のスタイル表示が復元されます

hover (中国語で「滞在、ホバー」を意味します)

文法

:hover

a:hover

a.class:hover

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :hover 伪类示例</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://www.php.cn">点击跳转</a>
<p>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</p>
<div>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</div>
</body>
</html>

アンカー擬似クラス

CSS をサポートするブラウザでは、リンクのさまざまな状態をさまざまな方法で表示できます

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS :anchor 伪类示例</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">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

注: CSS 定義では、a:hover を a:link の間に配置する必要がありますa :visited の後にのみ有効です。

注: CSS 定義では、a:active を有効にするには、a:hover の後に配置する必要があります。

注: 疑似クラス名では大文字と小文字が区別されません。

CSS :first-child疑似クラス

構文：:first-child

CSSバージョン：CSS2

参考URL：http://www.dreamdu.com/css/pseudo-class_first-child/

説明:

他の要素の最初の子要素と一致します。例: div には複数の p 要素が含まれています。次を使用できます。 first-child 擬似クラス

first、中国語の「最初」は意味します。 ; child、中国語での「子、子ノード」の意味

文法

: first-child

E: first-child

例

p > first-child

{

color:lime;

background:red;

}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
p:first-child
{
color:blue;
} 
</style>
</head>
<body>
<p>这是个测试</p>
<p>这是个测试</p>
<p><b>注意:</b>对于 :first-child 工作于 IE8以及更早版本的浏览器, DOCTYPE必须已经声明.</p>
</body>
</html>

CSS :lang pseudo-class

:lang pseudo-class を使用すると、次の定義を定義できます。さまざまな言語特別ルール

注: IE8 では、;lang 疑似クラスをサポートするために <!DOCTYPE> を宣言する必要があります。

りー

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS :hover 伪类示例</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://www.php.cn">点击跳转</a> <p>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</p> <div>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</div> </body> </html>

提出するリセットコード

自動運転