3.CSSセレクタ-仮想クラスセレクタ(リンク、アクセス、サスペンション、アクティブ、フォーカス、有効化、無効化、選択)

動的仮想クラスセレクタ?
HTML要素の状態変化に応じて造形を行う選択者.
ページ上の要素にマウスを置いたり、input上でカーソルをクリックしてフォーカスを移動したりすれば、ユーザーの動作に応じて状態を変えることもできます.
JSは使えますが、CSSスタイルだけを変更したい場合は、CSSだけで十分な状態に応じたスタイルが実現できます.
ハイパーリンクに適用可能なセレクタ
<:link, :visited>

<a href="인터넷 링크"> link </a>

htmlに上記のリンクを挿入します.
1.未アクセスの状態
2.アクセスステータスに分けます.
:linkは、アクセスしたことのないリンクスタイルを適用する選択者です.
:アクセス者は、アクセスしたリンクスタイルを適用する選択者です.

a { color: blue;}

アンカーラベルに上記cssを適用すると、リンクがアクセスされるかどうかにかかわらず、リンクのフォントが青で表示されます.
でも.

a:link { color :tomato; }

:linkのcssを適用すると、アクセスなしでリンクがトマト色に表示されます.

a:visited { color: purple}

:上のcssを適用すると、アクセスしたページのリンクが紫色に表示されます.
つまり.

a:link { color :tomato; }
a:visited { color: purple}

上にcssを適用したアンカーラベルは,リンクがアクセスされていない場合はトマト色,アクセスされている場合は紫色である.
バーチャルクラスセレクタ(Virtual Class Selector)を使用して、ユーザーがマウスをターゲットに移動またはクリックできるようにします.
<:hover, :active, :focus>

<input type="button" value="click me">

htmlで上の「click me」ボタンを作成できます.

input[type=button] { background-color: blue; }

上のcssを適用すると、ボタンにマウスを置き、背景色を青に固定します.

input[type=button]:hover { background-color: pink; }

:hoverは、マウスのサスペンション時にスタイリングを変更するコレクターです.
すなわち,上のcssはユーザがボタンにマウスを置くと背景色がピンク色になる.

input[type=button]:active { background-color: yellow; }

:activeは、ボタンなどをマウスでクリックしたときに適用するセレクタです.
(もう一度マウスを離すと元の状態に戻ります)
すなわち,上のcssはユーザがボタンをクリックすると,ボタンの背景色が黄色になる.
+)
mdnに基づいてactiveとして定義されたスタイルはlink、hover、accessで上書きされます.
関連項目:LINK
したがって、LVHA順序(:link-:アクセス済み-:hover-:active)でリンクを作成する必要があります.

input[type=button]:focus { background-color: red; }

:focusは、キーボードなどを使って要素間を往復移動する場合、すなわちボタンなどの要素が焦点になる場合に使用される造形です.
たとえば、テキストをfocusに設定すると、テキストウィンドウをクリックして入力するとスタイルが有効になります.
+)
<:enabled, :disabled, :checked>

<div>
  <input type="text" placeholder="1">
  <input type="text" placeholder="2">
  <input type="text" placeholder="3" disabled>
</div>

<div>
  <input type="radio" name="my-input" id="yes">
  <label for="yes">Yes</label>
  
  <input type="radio" name="my-input" id="no">
  <label for="no">No</label>
</div>

<div>
  <input type="checkbox" name="check-me" id="check-me">
  <label for="check-me">Check me!</label>
</div>

上の3つのcssセレクタはinput要素にこのように適用されます.

input[type=text]:enabled {}

-アクティブな要素にのみスタイルを適用します.

input[type=text]:disabled {}

-無効な要素にのみスタイルを適用します.

input[type=radio]:checked {}

-選択した要素にのみスタイルを適用します.