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