検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS 疑似クラス セレクターの深い理解 (コード例)

CSS 疑似クラス セレクターの深い理解 (コード例)

不言
不言オリジナル
2018-08-29 11:18:081590ブラウズ

この記事は、CSS 疑似クラス セレクターの詳細な理解に関する知識 (コード例) を提供します。必要な方は参考にしていただければ幸いです。

前書き

これまで、私は散発的に、:link、::after、content などの疑似クラスと疑似要素セレクターを理解して使用していました。 、最近本を読んでいるときにこの点で不足しているものを見つけたので、もう少し詳しく調べることにしました。以下は疑似クラスの部分の要約です。 :link、::after和content等伪类、伪元素选择器，最近看书时发现这方面有所欠缺，于是决定稍微深入学习一下，以下为伪类部分的整理。

伪类

 伪类选择器实质上是让设计师可以根据元素特定的状态，设置不同的视觉效果。具体有:link、:visited、:hover、:active、:focus、:focus-within、:target、:root和:checked。

HTMLAnchorElement的4大经典伪类

  1. :link，用于设置链接初始状态时的样式;

  2. :visited，用于设置链接被点击过后的样式;

  3. :hover，用于设置鼠标悬停在链接上方时，链接的样式;

  4. :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。
它们分别是：

  1. 鼠标点击;

  2. Tab键;

  3. 通过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]

其他

  1. :root，用于设置<html>元素的样式，从IE9开始支持。

  2. :checked，用于设置单选和复选控件被选中的样式，从IE9开始支持。结合伪元素::before和content属性可以实现灵活高效的自定义单选和复选控件。

  3. :empty，用于设置没有子节点的元素的样式。p{ }为存在TEXT_NODE子节点的元素，而p{}则为没有子节点的元素。

  4. :not，作为谓语表达取反的语义。

  5. :placeholder-shown

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

HTMLAnchorElement の 4 つの古典的な疑似クラス

  1. :link、使用リンクのスタイルを初期状態に設定します。

  2. :visited は、クリック後のリンクのスタイルを設定するために使用されます。 hover、マウスがリンク上にあるときにリンクのスタイルを設定するために使用されます。

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

    🎜 皆さんも私と同じように、最初に触れたのは上記の 4 つの疑似カテゴリーではないでしょうか。 ！そして、設定シーケンス (LVAH) を暗記しなければなりません (笑)。 🎜

    現在のターゲット要素のスタイルを設定します

    🎜 URL のシャープ記号を覚えていますか?ポンド記号 (#) から始まり URL の終わりまでは URL のハッシュまたはフラグメントと呼ばれ、ページ上の特定のリソースを見つけるために使用されます。ここで、#title が入力されている限り、ページに <h3 id="title">Target</h3> という要素があるとします。アドレス バーにある場合、要素 h3#title がビジュアル領域の特定の位置に配置されるまで、ブラウザはスクロールを続けます (スクロールには必ずしもトゥイーン アニメーションがあるとは限りません)。 (注意: UI ルーティングと混同しないでください) 🎜 上記の配置されたページ リソースはターゲット要素または現在のアクティブ要素と呼ばれます。そのスタイルは、:target を介して設定できます。 🎜互換性: IE9 でサポートされています。 🎜🎜例: 🎜rrreee

    要素がフォーカスされているときにスタイルを設定する

    🎜:focus は、要素がフォーカスされているときにスタイルを設定するために使用されます。 🎜互換性: IE8 のサポートを開始します。 🎜それでは、どの要素がフォーカス状態をサポートするのでしょうか?次に、まずフォーカスを達成するためにどのような操作を使用できるかを理解する必要があります。 🎜それらは: 🎜
    1. 🎜マウスクリック;🎜🎜
    2. 🎜Tabキー;🎜🎜
    3. 🎜 JavaScriptのHTMLElement.prototype. ) メソッド。 🎜🎜🎜🎜すると、伝統的にフォーカス状態をサポートする要素は、a、button、input、select でなければなりません。 🎜 HTML5 では、要素が contenteditable または tabindex 属性で設定されている場合、要素はフォーカス状態をサポートします。 🎜つまり、次のセレクターに一致する要素はフォーカス状態をサポートします。 🎜rrreee🎜注: tabindex 属性値が 0 未満の場合、Tab キーを使用してフォーカスを取得することはできません。ただし、要素はマウスのクリックまたはスクリプトによってフォーカスを取得できます。 🎜

      JS は現在フォーカスされている要素を取得します

      rrreee🎜誤解を招く属性もあります🎜rrreee

      子要素がフォーカスを取得したときに要素のスタイルを設定します

      🎜 :focus- 内で、子要素がフォーカスされているときに要素のスタイルを設定するために使用されます。 🎜互換性: Chrome63 のサポートを開始します。 🎜🎜例: 2 回目のパスワード確認時には、パスワード ボックスが強調表示されます🎜rrreee

      Other

      1. 🎜:root、<html> 要素のスタイルを設定するために使用され、IE9 以降でサポートされます。 🎜🎜
      2. 🎜:checked は、ラジオの選択したスタイルを設定し、コントロールをチェックするために使用され、IE9 以降でサポートされます。擬似要素の ::before 属性と content 属性を組み合わせることで、柔軟かつ効率的なカスタマイズされた無線およびチェック制御を実現できます。 🎜🎜
      3. 🎜:empty、子ノードを持たない要素のスタイルを設定するために使用されます。 p{ } は TEXT_NODE 子ノードを持つ要素ですが、p{} は子ノードを持たない要素です。 🎜🎜
      4. 🎜:not、否定の意味論を表す述語として。 🎜🎜
      5. 🎜:placeholder-show、要素のプレースホルダーが表示されるときにスタイルを設定するために使用されます。 🎜🎜🎜🎜関連する推奨事項: 🎜🎜🎜CSS 疑似クラス セレクター🎜🎜🎜🎜🎜CSS 疑似クラス セレクターについて_html/css_WEB-ITnose🎜🎜
        6.

以上がCSS 疑似クラス セレクターの深い理解 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSとHTMLの違いは何ですか？ CSSとHTMLの違いの比較次の記事：CSSとHTMLの違いは何ですか？ CSSとHTMLの違いの比較

関連記事

続きを見る