特定の状態 (ホバー、アクセス済み、無効など) を持つ要素を選択する CSS 疑似クラスを使用して、HTML 内の既存の要素に特定のスタイルを追加できます。

注 strong> - CSS 疑似クラスを疑似要素から分離するために、CSS3 では疑似クラスに単一コロン表記を使用します。

構文

以下は要素で CSS 疑似クラスを使用するための構文です-

以下はすべて利用可能な CSS 疑似クラスです-

##1 ##2 Checked 3 < td style="text-align: center;">無効にする enabled first-child first-of-type Focus フォーカスのある上記の要素を選択します hover 指定された範囲内の値を持つ言及された要素を選択します 無効な値を持つすべての言及された要素が選択されます 親として選択した最後の子 親によって最後に言及されたすべての要素を選択します 未訪問のメンション要素をすべて選択します ##17 18 #19 nth-last -oftype(n ) nth-of-type(n) only-of-type only-child 言及された各要素をその親の唯一の子要素として選択します #オプション 値が指定された範囲外にある前述の要素を選択します 言及された要素の指定された属性を選択するために「readonly」を使用します 「readonly」なしで上記の要素を選択します。 attribute 「required」属性を持つ言及された要素を選択します指定された ドキュメントのルート要素を選択します it 現在言及されているアクティブな要素を選択します (アンカー名を含む URL をクリックします) )

Sr.No	疑似クラスと説明
	アクティビティ アクティビティによって言及された要素を選択します
	チェックされたすべての言及された要素を選択します
It無効にされたすべての言及された要素を選択します #4
empty	それは選択されます。言及された各要素には何もありませんChildren ##5
	有効化された各要素が選択されます 6
	親の最初の子である言及された各要素が選択されます 7
	これは、各要素の最初に言及された要素を選択します。親 ##8
	#9
マウスオーバーで言及された要素を選択します	#10 スコープ内
	#11 無効
	12 lang (Language )
lang 属性値が「 language 」で始まる、言及されたすべての要素を選択します	13 last-child
	## 14 last-of -type
	15 リンク
	16 #not(selector) ##言及されていないすべての要素を選択します
	nth-child(n ) 親の n 番目の子である言及された各要素を選択します
	nth-last-child(n) n 番目の子を親レベルとして選択します言及された各要素について、最後の子から数えて
	言及された各要素、つまり、最後の子要素から数えて、親内の n 番目に言及された要素を選択します ##20
	親要素の n 番目にある、言及された各要素を選択します。 言及された要素 21
	は、親要素に記載されている各要素の唯一の言及として選択されます。 #22
	#23
「必須」属性なしで上記の要素を選択します	##24 範囲外です
	< /p>25 読み取り専用
	#26 read-write
	27 required
	#28 root
	29 target
30	有效 它选择具有有效值的所有提到的元素
31	访问过 它选择所有访问过的提到的元素

示例

让我们看一个 CSS 伪类的示例 -

现场演示

输出

这将产生以下输出 -

示例

让我们看一下 CSS 伪类的另一个示例 -

现场演示

输出

这将产生以下输出 -

当未将鼠标悬停在 div 元素上时 -

当鼠标悬停在 div 元素上时 -

以上がCSS疑似クラスを使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。