この記事は、疑似クラス セレクターの使用法 (コード例) について詳しく説明しています。必要な方は参考にしていただければ幸いです。
私はこれまで、:link、::after、content などの疑似クラスや疑似要素セレクターを散発的に理解し、使用していましたが、最近、これにいくつかの欠陥があることに気づきました。本を読みながら、もう少し深く勉強してみようと思い、疑似クラスの部分をまとめてみました。
疑似クラス セレクターを使用すると、基本的に、デザイナーは要素の特定の状態に基づいてさまざまな視覚効果を設定できます。具体的には、link、:visited、:hover、:active、:focus、:focus-within、:target、:root、:checked です。
HTMLAnchorElement
:link の 4 つの古典的な疑似クラス。初期リンク状態のスタイルを設定するために使用されます;
: Visited、リンクをクリックした後のリンクのスタイルを設定するために使用されます。
:hover、マウスがリンク上に移動したときにリンクのスタイルを設定するために使用されます。マウス ボタンを設定するには を押しますが、スタイルがリンクされているときは放しません。
皆さんも私と同じように、最初に出会ったのは上記の 4 つの疑似クラスではないでしょうか。 !そして設定順()も暗記しなければなりません(笑)。 現在のターゲット要素のスタイルを設定します
互換性: 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.}
要素がフォーカスを取得したときにスタイルを設定する
それでは、どの要素がフォーカス状態をサポートするのでしょうか?次に、まずフォーカスを達成するためにどのような操作を使用できるかを理解する必要があります。
それらは次のとおりです:
マウス クリック;
Tab キー;
JavaScript の HTMLElement.prototype.focus() メソッド経由。
伝統的にフォーカス状態をサポートする要素は、button、input、select、および textareas である必要があります。
HTML5 では、要素に contenteditable または tabindex 属性が設定されている場合、要素はフォーカス状態をサポートします。 。つまり、次のセレクターに一致する要素はフォーカス状態をサポートします。
a,button,input,select,textarea,[contenteditable],[tabindex]
JS は現在フォーカスされている要素を取得します
/* * 加载完成时默认返回body * 若某元素获得焦点时,则返回该元素 */ document.activeElement :: HTMLElement
// 用于检测文档是否得到焦点,即用户是否正在与页面交互 // 页面仅仅位于屏幕可视区域,而用户没有与之交互时返回false。 document.hasFocus :: Void -> Boolean
子要素がフォーカスを取得したときに要素のスタイルを設定します
:focus-within、子要素にフォーカスがあるときに要素のスタイルを設定するために使用されます。 互換性: Chrome63 のサポートが開始されました。
例: パスワードを 2 度目に確認すると、パスワード ボックスが強調表示されます。
.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]
Others
:root、< のスタイルを設定するために使用されます。 ;html>要素、IE9から対応開始。:チェック済み。ラジオの選択したスタイルを設定し、コントロールをチェックするために使用されます。IE9 以降でサポートされます。擬似要素 ::before 属性と content 属性を組み合わせることで、柔軟かつ効率的なカスタマイズされた無線およびチェック制御を実現できます。
:empty、子ノードを持たない要素のスタイルを設定するために使用されます。 p{} は TEXT_NODE 子ノードを持つ要素ですが、p{} は子ノードを持たない要素です。
:not、否定の意味論を表す述語として。
:placeholder-show、要素のプレースホルダーが表示されるときにスタイルを設定するために使用されます。
以上がCSS 疑似クラス セレクターの使用法を深く理解する (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。