フロントエンド css selector_html/css_WEB-ITnose について-htmlチュートリアル-php.cn

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

WBOY

リリース： 2016-06-24 11:32:30

オリジナル

1262 人が閲覧しました

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