フロントエンド css selector_html/css_WEB-ITnose について

css セレクターは式のようなもので、グループまたは HTML 要素を返し、次のスタイル宣言ブロックが返された要素に適用されます。したがって、CSS セレクターは、特定の HTML 要素を記述する抽象的な方法として理解できます。

特定のセレクターについて説明する前に、セレクターのグループ化とセレクターの組み合わせの違いについて言及する必要があります。セレクターのグループ化では各セレクター間にカンマ演算子が追加され、グループ化では h1,h2 {color:red} などの「OR」演算が実行されます。 。セレクターの組み合わせは、セレクター間をスペースまたはその他の記号 (+ や > など) で接続し、「and」と同様の操作を実行します。どのセレクターも (意味がある限り) グループ化または結合できます。

別の概念を紹介します --- 単語リスト: スペースで区切られた単語のグループ。 (属性のスペースを区切ることが重要です)

カテゴリごとに 8 種類のセレクターがあります:

1. このセレクターは、対応する HTML タグ内に記述され、次にスタイルが続きます。宣言ブロックは、ページ上のすべてのセレクターに対応するタグに適用されます。

2. ID セレクター。ID セレクターの記述方法は #id {} で、ID の先頭には文字のみを使用できます。返されるのは、ID 値がページ タグのセレクターで指定された値であるタグです。 ID セレクターを ID セレクターと組み合わせることはできません。

3. クラス セレクターの記述方法は、クラス名を先頭に追加し、その後に数字、サブタイトル、または下線を続けることができます。ここで説明する必要があるのは、クラス セレクターをクラス セレクターと組み合わせると、返されるページ要素は、クラス属性の単語リスト内の要素であり、セレクターで指定されたクラス名も含まれるということです。セレクター クラス名を 1 つだけ含むもの、またはすべて含まないものは返されません。

4. 属性セレクターを記述する方法は、[] 内に属性名を記述するか、[href]、[href$=.com] などの演算子で属性名と値を接続することです。セレクターは、特定の属性または両方の属性の特別な値を持つ A タグを持つものを選択します。具体的な分類は次のとおりです。

[href] は、href 属性を持つタグを選択することを意味します

[href=www.cnblogs.com] は、href 属性値 www.cnblogs.com を持つタグを選択することを意味します

[href^=www ] は、href 属性値が www で始まるタグを選択することを意味します

[href$=.com] は、href 属性値が .com で終わるタグを選択することを意味します

[class~=button] は、単語リストに button を含むタグを選択することを意味しますクラス属性値

[class*=button] は、クラス属性値文字列にボタン文字を含むラベルを表します。これは ~=

[lang |= en] |= の特別な方法であることに注意してください。 lang の属性値を示す記述 en または en- で始まるタグ

上記の記述方法では、属性値は引用符で囲んでも付けなくても構いませんが、属性値が記号の場合や を含む場合は省略可能です。 [href=" #"] のように、スペース、引用符を追加する必要があります

属性セレクターと属性セレクターの組み合わせは、同時に属性を含むことを意味します

5. 擬似クラス セレクター、擬似クラス セレクターのふりをします。名前が示すように、クラスを持つことは、ラベルのクラスがバックグラウンドでブラウザによって表示されないことを意味します。このタイプのクラスは、特定の状態または操作の下でブラウザによって静かにかつ非表示に要素タグに追加されます。このタイプのタグを選択した場合は、クラス名定数を参照するために次を使用する必要があります。たとえば、a:link が使用されている場合、アクセスされていない a タグを持つブラウザはリンク クラスを密かに追加しますが、このクラス名はページ上に表示されません。これを参照するには、link, a: を使用します。訪問済みはタグを訪問したことを意味します。この観点から、疑似クラスは要素セレクターの後置属性として理解できます。リンクに表示された 2 つの疑似クラスは静的疑似クラスです。つまり、ブラウザがそれらを静かに追加および変更した場合、これら 2 つの疑似クラスは a タグにのみ適用でき、そこに戻るように指示されません。これは、任意のタグに適用できる別の擬似クラス、つまり動的擬似クラスです。動的疑似クラスとは、ブラウザがクラス名を一度だけ静かに変更し、その後は状況に応じて複数回変更することを意味します。

動的疑似クラスには以下が含まれます:

:hover

:enabled

:disabled

:checked

その他の静的疑似クラス (ドキュメントが DOM インターフェースを通じて変更された場合、元の静的疑似クラスがまだ使用されている場合は検証が必要です)

:first-child

:last-child

:nth-child(even)

:nth-last-child(even)

:only-child

:fist- of-type

:last-of-type

:nth-of-type(even)

:nth-last-of-type(even)

:only-of-type

疑似クラスは疑似クラスと組み合わせます。

6. 疑似要素セレクターは、名前が示すように、ラベル要素があるように見せかけ、ブラウザーはユーザーには見えないが表示されるラベルを密かに提供します。疑似クラス セレクターと区別するために、疑似要素セレクターでは:: 二重コロンが使用されるようになりました。

一般的な擬似要素セレクターは次のとおりです:

::first-letter

::first-line

::before {content:"";}

::after{content:""}

7 。子孫セレクター 子孫セレクターは、実際にはセレクターの組み合わせを応用したものです

共通の子孫セレクター:

1.h2 p セレクターは、以前のすべての子孫の次の要素を表すためにスペースで接続されています

2.h2 > p セレクターは、直接の子要素を示す大なり記号で接続されます

3.h2~p セレクターは、すべての兄弟要素を示す ~ 記号で接続されます

4.h2+p セレクターは、次の記号で接続されます+ 記号、直接接続された兄弟要素を表します

セレクターの詳細度の最終計算:

ID セレクターの詳細度は 100 です

クラス、属性、疑似クラスの詳細度は 10 です

要素、疑似要素の詳細度は 1 です

書き込み行のセレクターの特異性は 1000

たとえば、h2.button {} の特異性は 1+10=11 です