ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSの疑似クラスセレクターとは何ですか?疑似クラスセレクターの簡単な紹介

CSSの疑似クラスセレクターとは何ですか?疑似クラスセレクターの簡単な紹介

青灯夜游
リリース: 2020-09-05 11:29:18
オリジナル
31291 人が閲覧しました

この章では、CSS の疑似クラス セレクターとは何なのかについて説明します。疑似クラスセレクターの簡単な紹介。 cssにおける擬似クラスセレクターの役割、css擬似クラスセレクターの分類とは何か、その他の知識をみんなに理解してもらいましょう。困っている友人は参考にしていただければ幸いです。 (関連する推奨事項: 「CSS チュートリアル 」)

CSSの疑似クラスセレクターとは何ですか?疑似クラスセレクターの簡単な紹介

##1. 疑似クラス セレクターの概要

疑似クラス セレクター (疑似クラスと呼ばれる) はコロンによって定義され、クリックが押された、クリックが完了したなどの要素の状態を定義します。スタイルは状態に合わせて変更できます。疑似クラスを介して要素を取得します。

疑似クラスの機能は一般的な DOM の要素スタイルに似ていますが、一般的な DOM の要素スタイルとは異なり、DOM の内容は変更されません。変更された要素がいくつか挿入されるだけで、ユーザーには表示されますが、DOM には表示されません。疑似クラスの効果は、実際のクラスを追加することで実現できます。

疑似クラスとは何ですか?

CSS 組み込みクラス css 自体がいくつかの機能を提供することを意味します。つまり、class= は必要ありません。 ... または id=... もちろん、a:link{color:#FF0000;}

# などの一部の属性を変更することもできます。

## 2. 擬似クラス セレクター 擬似クラス セレクターの分類は、主に動的擬似クラス セレクター、UI 要素状態擬似クラス セレクター、構造擬似クラス セレクターと否定擬似クラス セレクター。

これらのカテゴリのセレクター構文については、以下で詳しく説明します。

1. 動的疑似クラス セレクター構文

    E: リンク (リンク擬似クラス セレクター): 一致する E 要素を選択します。一致する要素はハイパーリンクとして定義されており、アクセスされていません。リンクの説明ポイントで一般的に使用されます
  • E:visited (リンク疑似クラス セレクター): 一致する E 要素を選択します。一致する要素はハイパーリンクで定義され、訪問済みです。リンク描画ポイントで一般的に使用されます。
  • E:active (ユーザー動作セレクター): 一致する E 要素を選択すると、一致する要素がアクティブになります。リンク ストロークとボタンで一般的に使用されます。
  • E:hover (ユーザー動作セレクター): 一致する E 要素を選択すると、ユーザーのマウスは要素 E 上に留まります。 IE6 以下のブラウザは、a:hover
  • E:focus (ユーザー動作セレクター) のみをサポートします。一致する E 要素を選択すると、一致する要素がフォーカスを取得します
  • 動的擬似クラス セレクターは、タグのハイパーリンクのアプリケーションで使用できます。

タグには、次のように 4 つの擬似クラス (4 つの状態に対応) があります。

    :link "Link": ハイパーリンクがクリックされる前
  • #:visited "Visited": リンクが訪問された後
  • #:hover 「ホバー」: マウスがラベル上に置かれたとき

  • :active 「アクティブ化」: マウスがラベル上でクリックされたが放さないとき。

  • コード例:

    /*让超链接点击之前是红色*/
    a:link {color: red;}
    
    /*让超链接点击之后是橙色*/
    a:visited {color: orange;}
    
    /*鼠标悬停,放到标签上的时候是绿色*/
    a:hover {color: green;}
    
    /*鼠标点击链接,但是不松手的时候*/
    a:active {color: black;}
    ログイン後にコピー
  • a タグのこれら 4 つの疑似クラス セレクターには特定の順序があります。各スタイル間の順序は非常に特殊です。というメッセージが表示される場合は、配置エラーにより上書きされ、いずれかのスタイルが表示されなくなる可能性があります。では、a タグのこれら 4 つの疑似クラス セレクターは、使用する前にどのようにソートする必要があるのでしょうか?

CSS 定義では、a:hover を有効にするためには a:link および a:visited の後に配置する必要があり、有効にするためには a:active を a:hover の後に配置する必要があります。

したがって、a タグの 4 つの疑似クラス セレクターの順序は、a:link、a:visited、a:hover、a:active

2.UI になります。要素 ステータス擬似クラス セレクター

E:checked (選択ステータス擬似クラス セレクター): 選択されたチェック ボタンまたはラジオ ボタンのフォーム要素と一致します

  • E:enabled (有効ステータス擬似クラス セレクター): すべての有効なフォーム要素と一致します。

  • ##E:disabled (使用不可ステータス擬似クラス セレクター): すべての無効フォーム要素と一致します要素
  • UI 要素のステータス擬似クラス セレクターは、主に HTML の Form 要素を操作するために使用されます。最も一般的な例は、「type="text」にenable と Disabled があることです。さらに、「type="radio" と "type="checkbox"」 には「チェック済み」と「チェックなし」の 2 つの状態があります。たとえば、「無効」テキスト ボックスを他のテキスト ボックスと区別したい場合は、次のように適用できます。
  • input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
    ログイン後にコピー

    注: IE6-8 は、「:checked」をサポートしていません。 "、":enabled"、":disabled" の 3 つのセレクターです。

3. 構造擬似クラスセレクター

E: fisrt-child: 親要素の最初の子要素である要素 E 。 E:nth-child(1) と同等

  • E:last-child :作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同

  • E:root:选择匹配元素E所在文档的根元素。在HTML文档中,根元素始终是html,此时该选择器与html类型选择器匹配的内容相同

  • E F:nth-child(n):选择父元素E的第n个子元素F。其中n可以是整数(1,2,3)、关键字(even,odd)、可以是公式(2n+1),而且n值起始值为1,而不是0.

  • E F:nth-last-child(n):选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反,但使用方法都是一样的,其中:nth-last-child(1)始终匹配最后一个元素,与last-child等同

  • E:nth-of-type(n) :选择父元素内具有指定类型的第n个E元素

  • E:nth-last-of-type(n):选择父元素内具有指定类型的倒数第n个E元素

  • E:first-of-type:选择父元素内具有指定类型的第一个E元素,与E:nth-of-type(1)等同

  • E:last-of-tye :选择父元素内具有指定类型的最后一个E元素,与E:nth-last-of-type(1)等同

  • E:only-child :选择父元素只包含一个子元素,且该子元素匹配E元素

  • E:only-of-type:选择父元素只包含一个同类型子元素,且该子元素匹配E元素

  • E:empty: 选择没有子元素的元素,而且该元素也不包含任何文本节点

  • 结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁。

    结构伪类选择器很容易遭到误解,需要特别强调。如:

    p:first-child;
    ログイン後にコピー

    它表示的是:选择父元素下的第一个子元素 p,而不是选择 p 元素的第一个子元素。

    注意:

    结构伪类选择器中,子元素的序号是从 1 开始的,也就是说,第一个子元素的序号是 1,而不是 0。换句话说,当参数 n 的计算结果为 0 时,将不选择任何元素。

    4.否定伪类选择器

    E:not(F):匹配所有除元素F外的E元素

    例:对form中所有input加边框,但又不想submit也起变化,就可以这样写:

    input:not([type="submit"]) {border: 1px solid red;}
    ログイン後にコピー

    以上がCSSの疑似クラスセレクターとは何ですか?疑似クラスセレクターの簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    関連ラベル:
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート