CSS疑似クラス

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クラスと一緒に使用できます:

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

< ;a class ="red" href="css-syntax.html ">CSS 構文</a>

上記の例のリンクにアクセスしたことがある場合は、赤色で表示されます。

インスタンス

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疑似クラス/要素

以外のすべての要素を選択しますの 2 つの子要素:before:after language)

セレクター	例	例の説明
: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 (
p:lang(it) <p> 要素の lang 属性の開始値を選択してください

学び続ける

新しいファイル

<!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>

リセットコード

自動運転

提出する

プレビュー Clear