CSS 疑似クラス
CSS 疑似クラスは、セレクターに特殊効果を追加するために使用されます。
構文
擬似クラス構文:
selector:pseudo-class {property:value;}
CSS クラスでも pse を使用できますudo クラス:
selector.class:pseudo-class {property:value;}
anchor pseudo-class
CSS をサポートするブラウザでは、リンクのさまざまな状態をさまざまな方法で表示できます。 CSS リンクでは、
の例について少し学びました
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已浏览过的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过的链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
</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>注: a:hover は a:link と a:visited の後になければなりません。また、それらは厳密な順序で表示される必要があります。効果。
注: a:active は a:hover の後に来る必要があります。
注: 疑似クラス名では大文字と小文字が区別されません。
プログラムを実行して試してみましょう
疑似クラスとCSSクラス
疑似クラスはCSSクラスと一緒に使用できます:
上記の例のリンクにアクセスしたことがある場合は、赤色で表示されます。
インスタンス
Use :focus
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
input:focus
{
background-color:yellow;
}
</style>
</head>
<body>
<form action="" method="get">
姓名: <input type="text" name="fname" /><br>
留言: <input type="text" name="content" /><br>
<input type="submit" value="Submit" />
</form>
</body>
</html>プログラムを実行して試してみる
すべてのCSS疑似クラス/要素
| セレクター | 例 | 例の説明 |
|---|---|---|
| :checked | input:checked | 選択されたフォーム要素をすべて選択 |
| :disabled | input:disabled | 無効になっているフォーム要素をすべて選択します |
| :empty | p:empty | 子要素を持たないすべてのp要素を選択 |
| :enabled | input:enabled | 有効なフォーム要素をすべて選択 |
| :first-of-type | p:first-of-type | p 要素である各親要素の最初の p 子要素を選択します |
| :in-range | input:in-range | 指定された範囲内の要素を選択します 値 |
| : 無効 | input: 無効 | 無効な要素をすべて選択 |
| : last-child | p: last-child | すべての p 要素の最後の子要素を選択 |
| : last-of-type | p:last-of-type | は、その親要素である各p要素の最後のp要素を選択します |
| :not(selector) | :not(p) | は、p | 以外のすべての要素を選択します
| :nth-child(n) | p:nth-child(2) | すべてのp要素の2番目の子要素を選択します |
| :nth-last-child(n) | p:nth- last-child(2) | すべての p 要素の最後から 2 番目の子要素を選択します |
| :nth-last-of-type(n) | p:nth-last-of-type( 2) | Select最後から 2 番目の子要素が p |
| :nth-of-type(n) | p:nth-of-type(2) | すべての p 要素を選択する p |
| :only-of-type | p:only-of-type | p の子要素を 1 つだけ持つすべての要素を選択します |
| :only-child | p :only-child | を含むすべての p 要素を選択します子要素は 1 つだけ |
| :optional | input:optional | 「必須」なしで要素属性を選択 |
| :out-of-range | input :out-of-range | 値を持つ要素属性を選択指定範囲外 |
| :read-only | input:read-only | 読み取り専用属性を持つ要素属性を選択 |
| :read-write | input:read-write | 要素を選択読み取り専用属性を持たない属性 |
| :required | input:required | 「required」属性で指定された要素属性を選択 |
| :root | root | ドキュメントのルート要素を選択 |
| : ターゲット | #news: ターゲット | 現在アクティブな #news 要素を選択します (アンカーの名前を含む URL をクリックします) |
| :valid | input:valid | 有効な値を持つすべての属性を選択します |
| :link | a:link | 未訪問のリンクをすべて選択します |
| :visited | a:visited | 選択すべての訪問済みリンク |
| :active | a:active | アクティブなリンクを選択 |
| :hover | a:hover | リンク上にマウスを置きます |
| :focus | input:focus | 入力後にフォーカスする要素を選択します |
| :first-letter | p:first-letter | 各<p>要素の最初の文字を選択します |
| :first-line | p:first -line | 各 <p> 要素の最初の行を選択します |
| :first-child | p:first-child | セレクターは、任意の要素 <]p> の最初の子要素と一致します。 |
| p:before | 各 <p> 要素の前にコンテンツを挿入します | |
| 各 <p> 要素の後にコンテンツを挿入します | :lang ( | language|
| p:lang(it) <p> 要素の lang 属性の開始値を選択してください |
