CSS 疑似クラス セレクターの使用法を深く理解する (コード例)

この記事は、疑似クラス セレクターの使用法 (コード例) について詳しく説明しています。必要な方は参考にしていただければ幸いです。

序文

私はこれまで、:link、::after、content などの疑似クラスや疑似要素セレクターを散発的に理解し、使用していましたが、最近、これにいくつかの欠陥があることに気づきました。本を読みながら、もう少し深く勉強してみようと思い、疑似クラスの部分をまとめてみました。

疑似クラス

疑似クラス セレクターを使用すると、基本的に、デザイナーは要素の特定の状態に基づいてさまざまな視覚効果を設定できます。具体的には、link、:visited、:hover、:active、:focus、:focus-within、:target、:root、:checked です。

HTMLAnchorElement

:link の 4 つの古典的な疑似クラス。初期リンク状態のスタイルを設定するために使用されます;

: Visited、リンクをクリックした後のリンクのスタイルを設定するために使用されます。

:hover、マウスがリンク上に移動したときにリンクのスタイルを設定するために使用されます。マウス ボタンを設定するには を押しますが、スタイルがリンクされているときは放しません。

皆さんも私と同じように、最初に出会ったのは上記の 4 つの疑似クラスではないでしょうか。 ！そして設定順（

LVAH

）も暗記しなければなりません（笑）。 現在のターゲット要素のスタイルを設定します

URL のポンド記号を覚えていますか?ポンド記号 (#) から始まり URL の終わりまでは URL のハッシュまたはフラグメントと呼ばれ、ページ内の特定のリソースを見つけるために使用されます。現在、ページ上に 3b64331653e4821e59c10723198d239bTarget39528cedfa926ea0c01e69ef5b2ea9b0 の要素があるとします。#title がアドレス バーに入力されている限り、ブラウザはスクロールを続けます (スクロールは必ずしも必要ではありません)。トゥイーン効果があります) h3#title 要素まで ビューポート内の特定の場所に配置されます。 (注: UI ルーティングと混同しないでください)

上記の配置されたページ リソースは、ターゲット要素または現在のアクティブ要素と呼ばれます。そのスタイルは :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 は、要素がフォーカスされたときにスタイルを設定するために使用されます。

互換性: IE8 のサポートが開始されました。

それでは、どの要素がフォーカス状態をサポートするのでしょうか?次に、まずフォーカスを達成するためにどのような操作を使用できるかを理解する必要があります。
それらは次のとおりです:

マウス クリック;

Tab キー;

JavaScript の HTMLElement.prototype.focus() メソッド経由。

伝統的にフォーカス状態をサポートする要素は、button、input、select、および textareas である必要があります。

HTML5 では、要素に contenteditable または tabindex 属性が設定されている場合、要素はフォーカス状態をサポートします。 。

つまり、次のセレクターに一致する要素はフォーカス状態をサポートします。

a,button,input,select,textarea,[contenteditable],[tabindex]

注: tabindex 属性値が 0 未満の場合、Tab キーを使用してフォーカスを取得することはできません。ただし、要素はマウスのクリックまたはスクリプトによってフォーカスを取得できます。

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 サイトの他の関連記事を参照してください。