CSS 疑似クラス セレクターの深い理解 (コード例)
この記事は、CSS 疑似クラス セレクターの詳細な理解に関する知識 (コード例) を提供します。必要な方は参考にしていただければ幸いです。
前書き
これまで、私は散発的に、:link、::after、content などの疑似クラスと疑似要素セレクターを理解して使用していました。 、最近本を読んでいるときにこの点で不足しているものを見つけたので、もう少し詳しく調べることにしました。以下は疑似クラスの部分の要約です。 :link、::after和content等伪类、伪元素选择器，最近看书时发现这方面有所欠缺，于是决定稍微深入学习一下，以下为伪类部分的整理。
伪类
伪类选择器实质上是让设计师可以根据元素特定的状态，设置不同的视觉效果。具体有:link、:visited、:hover、:active、:focus、:focus-within、:target、:root和:checked。
HTMLAnchorElement的4大经典伪类
:link，用于设置链接初始状态时的样式;:visited，用于设置链接被点击过后的样式;:hover，用于设置鼠标悬停在链接上方时，链接的样式;:active，用于设置鼠标按键按下，但未释放时，链接的样式。
想必各位都和我一样，最初接触到的就是上述4个伪类了吧？！而且还死机硬背它们的设置顺序(LVAH)吧，哈哈。
设置当前目标元素样式
还记得URL中的井号吗？从井号(#)开始到URL的末尾称为URL的hash或fragment，用于定位页面内某项资源。假设现在页面存在<h3 id="title">Target</h3>的元素，那么只要地址栏输入#title浏览器就会不断滚动(滚动不一定存在补间动效)直到元素h3#title位于可视区的特定位置。（注意：请不要和UI Routing混为一谈）
而上述这个被定位的页面资源，被称为目标元素或当前活动元素！可通过:target设置其样式。
兼容性：IE9开始支持。
示例：
// 当前URL为http://foo.com#1
:target {
color: red;
}
.title{
color: blue;
&:target{
border: solid 1px red;
}
}
.title{I'm not target element.}
.title#1{Yes, I'm.}设置元素获得焦点时的样式
:focus用于设置元素处于focus状态下的样式。
兼容性：IE8开始支持。
那么哪些元素支持focus状态呢？那要先弄清楚通过哪些操作可能实现focus。
它们分别是：
鼠标点击;
Tab键;
通过JavaScript的
HTMLElement.prototype.focus()方法。
那么传统上支持focus状态的元素必定是a、button、input、select和textareas.
而HTML5中增加当元素设置了contenteditable或tabindex属性时，该元素支持focus状态。
也就是符合以下选择器的元素均支持focus状态。
a,button,input,select,textarea,[contenteditable],[tabindex]
注意：若tabindex属性值小于0，则无法通过Tab键获得焦点。但可以通过鼠标点击 或 脚本时元素获得焦点。
JS获取当前得到焦点的元素
/* * 加载完成时默认返回body * 若某元素获得焦点时，则返回该元素 */ document.activeElement :: HTMLElement
另外还有一个让人误会的属性
// 用于检测文档是否得到焦点，即用户是否正在与页面交互 // 页面仅仅位于屏幕可视区域，而用户没有与之交互时返回false。 document.hasFocus :: Void -> Boolean
设置子元素获得焦点时，该元素的样式
:focus-within，用于设置当子元素处于focus状态时，该元素的样式。
兼容性:Chrome63开始支持。
示例：二次确认密码时，密码框高亮
.form-control{
&:focus-within > input{
&:focus {
border: solid 1px skyblue;
}
&:not(:focus){
border: solid 1px orange;
}
}
}
.form-control>input.pwd[type=password]+input.confirm-pwd[type=password]其他
:root，用于设置<html>元素的样式，从IE9开始支持。:checked，用于设置单选和复选控件被选中的样式，从IE9开始支持。结合伪元素::before和content属性可以实现灵活高效的自定义单选和复选控件。:empty，用于设置没有子节点的元素的样式。p{ }为存在TEXT_NODE子节点的元素，而p{}则为没有子节点的元素。:not，作为谓语表达取反的语义。-
擬似クラス:placeholder-shown
:link、:visited、:hover、:active、:focus > >、:focus-within、:target、:root、および :checked。
HTMLAnchorElement の 4 つの古典的な疑似クラス
-
:link、使用リンクのスタイルを初期状態に設定します。:visitedは、クリック後のリンクのスタイルを設定するために使用されます。 hover、マウスがリンク上にあるときにリンクのスタイルを設定するために使用されます。 -
🎜 皆さんも私と同じように、最初に触れたのは上記の 4 つの疑似カテゴリーではないでしょうか。 ！そして、設定シーケンス (:active、マウスがリンク上に移動したときにリンクのスタイルを設定するために使用されます。ボタンが押されていますが、放されていません。LVAH) を暗記しなければなりません (笑)。 🎜現在のターゲット要素のスタイルを設定します
🎜 URL のシャープ記号を覚えていますか?ポンド記号 (#) から始まり URL の終わりまでは URL のハッシュまたはフラグメントと呼ばれ、ページ上の特定のリソースを見つけるために使用されます。ここで、#titleが入力されている限り、ページに<h3 id="title">Target</h3>という要素があるとします。アドレス バーにある場合、要素h3#titleがビジュアル領域の特定の位置に配置されるまで、ブラウザはスクロールを続けます (スクロールには必ずしもトゥイーン アニメーションがあるとは限りません)。 (注意: UI ルーティングと混同しないでください) 🎜 上記の配置されたページ リソースはターゲット要素または現在のアクティブ要素と呼ばれます。そのスタイルは、:targetを介して設定できます。 🎜互換性: IE9 でサポートされています。 🎜🎜例: 🎜rrreee要素がフォーカスされているときにスタイルを設定する
🎜:focusは、要素がフォーカスされているときにスタイルを設定するために使用されます。 🎜互換性: IE8 のサポートを開始します。 🎜それでは、どの要素がフォーカス状態をサポートするのでしょうか?次に、まずフォーカスを達成するためにどのような操作を使用できるかを理解する必要があります。 🎜それらは: 🎜- 🎜マウスクリック;🎜🎜
- 🎜Tabキー;🎜🎜
- 🎜 JavaScriptの
HTMLElement.prototype. )メソッド。 🎜🎜🎜🎜すると、伝統的にフォーカス状態をサポートする要素は、a、button、input、selectでなければなりません。 🎜 HTML5 では、要素がcontenteditableまたはtabindex属性で設定されている場合、要素はフォーカス状態をサポートします。 🎜つまり、次のセレクターに一致する要素はフォーカス状態をサポートします。 🎜rrreee🎜注:tabindex属性値が 0 未満の場合、Tab キーを使用してフォーカスを取得することはできません。ただし、要素はマウスのクリックまたはスクリプトによってフォーカスを取得できます。 🎜JS は現在フォーカスされている要素を取得します
rrreee🎜誤解を招く属性もあります🎜rrreee子要素がフォーカスを取得したときに要素のスタイルを設定します
🎜:focus-内で、子要素がフォーカスされているときに要素のスタイルを設定するために使用されます。 🎜互換性: Chrome63 のサポートを開始します。 🎜🎜例: 2 回目のパスワード確認時には、パスワード ボックスが強調表示されます🎜rrreeeOther
- 🎜
:root、<html>要素のスタイルを設定するために使用され、IE9 以降でサポートされます。 🎜🎜- 🎜
:checkedは、ラジオの選択したスタイルを設定し、コントロールをチェックするために使用され、IE9 以降でサポートされます。擬似要素の::before属性とcontent属性を組み合わせることで、柔軟かつ効率的なカスタマイズされた無線およびチェック制御を実現できます。 🎜🎜- 🎜
:empty、子ノードを持たない要素のスタイルを設定するために使用されます。p{ }は TEXT_NODE 子ノードを持つ要素ですが、p{}は子ノードを持たない要素です。 🎜🎜- 🎜
:not、否定の意味論を表す述語として。 🎜🎜- 🎜
:placeholder-show、要素のプレースホルダーが表示されるときにスタイルを設定するために使用されます。 🎜🎜🎜🎜関連する推奨事項: 🎜🎜🎜CSS 疑似クラス セレクター🎜🎜🎜🎜🎜CSS 疑似クラス セレクターについて_html/css_WEB-ITnose🎜🎜 - 🎜
- 🎜
以上がCSS 疑似クラス セレクターの深い理解 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7469
15
1376
52
77
11
19
29
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
ブートストラップの日付を表示する方法
Apr 07, 2025 pm 03:03 PM
回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップの日付を確認する方法
Apr 07, 2025 pm 03:06 PM
ブートストラップの日付を確認するには、次の手順に従ってください。必要なスクリプトとスタイルを紹介します。日付セレクターコンポーネントを初期化します。 Data-BV-Date属性を設定して、検証を有効にします。検証ルール（日付形式、エラーメッセージなどなど）を構成します。ブートストラップ検証フレームワークを統合し、フォームが送信されたときに日付入力を自動的に検証します。
ブートストラップナビゲーションバーの設定方法
Apr 07, 2025 pm 01:51 PM
ブートストラップは、ナビゲーションバーをセットアップするための簡単なガイドを提供します。ブートストラップライブラリを導入してナビゲーションバーコンテナを作成するブランドアイデンティティの作成ナビゲーションリンクの作成他の要素の追加（オプション）調整スタイル（オプション）
