仮想クラスセレクタとして装飾

1414 ワード
web selector CSS テキストリンク

🧑🏼‍💻 仮想クラスセレクタ?


テキストの色を変えたり、背景を飾ったりしますが、静的なページの魅力は低いです.ユーザーの多いWebページでは、マウスだけで画像やメニューバーを移動できるシーンを見ることができます.次に、Webページをよりダイナミックに変更できる仮想クラスセレクタを見てみましょう.

🤹‍♀️ : 仮想イベント


仮想クラスセレクタは文構造を使用し、tagの後に:(가상이벤트)を追加します.
.myClass img:hover{ 
	opacity: 0;
}
上記のコードは、myClassクラスの画像要素がhoverというイベントが発生したときに適用されるスタイルを示す.

:link

:linkは、aラベルに適用される仮想セレクタです.アクセスする前にリンクを選択してください.逆に、:visitedを使用して選択してください.
.Contact a:link{
	color: red;
}

:hover

:hoverは、マウスがマウスをスクロールしたときにスタイルを適用するセレクタです.簡単に言えば、マウスカーソルを上げるとスタイルが変わります.一般的な仮想選択プログラムとして使用されます.同様の仮想セレクタは:activeで、マウスをクリックすると適用されます.
.About h1:hover{
	background-color: blue;
}

:focus

:focusは、通常、inputタグでよく使用されるセレクタであり、フォーカスされるとスタイルが適用される.
input:focus{
	background: orange;
}

:first-child

:first-childおよび:last-childの選択者は、それぞれ第1のサブエレメントおよび最後のサブエレメントを選択する.次に、:nth-child(2n+1)は奇数サブアイテムを選択する.
.Work>div:nth-child(2n+1){
	background-color: gold;
}
SpringBoot]ショッピングモールアイテム(11)-商品修正
コン鵬雲源コードインストールmysql 5.7.31