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> を宣言する必要があります。
りー
次のセクション
