CSS セレクターの簡単な紹介

まえがき：これは著者自身が勉強した上での理解と整理です。間違いや質問がある場合は、修正してください。引き続き更新を続けます。

セレクターの重み

セレクターの重みが 4 桁で表される場合:

• 要素セレクターの重み は 1、

• id セレクターの重みは 100 です。

  Class
• Classセレクターの重量は10です

  お得なセット！重要ですが、これが最も重要です。直接 kill します。

  CSS セレクター
• 概要

  :

• ワイルドカード セレクター、*{...}、アスタリスク。任意の要素に一致します; 要素セレクター、html{...}、body{...}、p{...}、ドキュメントの要素は最も基本的なセレクター、要素セレクターです。

id セレクター、#value、要素に id 属性を設定します。値は value です。

class クラス セレクター、.value{...}、要素に class 属性を設定します、値は value です。 属性セレクター、属性セレクターは属性と属性値に基づいて要素を選択します。多くのタイプがあります:

• 単純な属性セレクター: img[title]、get alt 属性が設定された img 要素; #wrapper[outter]、ラッパーの ID と属性ラッパーを持つ要素を取得します

• 特定の属性セレクター: input[type="button"]、属性値ボタンの入力要素を取得します。 outter="abc"]、ID がwrapper、属性 outter の値が abc である要素を取得します

• 部分属性セレクター: p[class ^="a"]、is を使用してクラス属性値を取得します。先頭の p 要素; p[class $="b"]、クラス属性値が b で終わる p 要素を取得します。グループ化するセレクターをカンマで区切ります。 #wrapper、#content{...}、ラッパーの ID を持つ要素とコンテンツの ID を持つ要素を取得し、両方を取得します
子孫セレクター
• 、グループ化するセレクターをスペースで区切ります、 # Wrapper #content{...}、ラッパーの ID を持つ要素

  オブジェクト 内で、コンテンツの ID を持つ要素を取得します。 は子要素または子孫要素

1. の子要素セレクターです。

   、ラッパーの ID を持つ要素オブジェクト内で #wrapper > #content{...} という大なり記号でグループ化するセレクターを区切ります。
content の ID を持つ

2. 子要素を取得します。 1 レベル下のみを検索します

   ；子要素セレクターと子孫セレクターは同じではありません
子孫セレクターには子要素セレクターが含まれており、子孫セレクターは下方向の検索を続行します
3. ；
   兄弟要素セレクター:

• 隣接する兄弟セレクター

  (IE6 以前ではサポートされていません)、クラス ラッパーで要素を取得した後、グループ化するセレクターをプラス記号 (.wrapper + .content{...}) で区切ります。次の要素 クラスがコンテンツである要素の場合、
ユニバーサル兄弟セレクター
• との違いは、

  隣接兄弟セレクターは現在の要素の後にある直後の要素のみを取得することです。たとえ同じものが後であったとしても、それらを取得することはできません。 selected;

  ユニバーサル兄弟セレクター (IE7 以前ではサポートされていません)、クラス ラッパー
all
• で要素を取得した後、グループ化するセレクターをチルダで区切ります .wrapper ~ .content{...}クラスの内容を持つ要素は、隣接する兄弟セレクターとは異なります;

• 疑似クラス セレクター (IE8 以前ではサポートされていません):

1. :root ドキュメントのルート要素、つまり HTML 要素を選択します。 focus

   、現在の入力ボックス フォーカスを取得します。

2. element

   :hover
、マウスは現在の要素上にあります。

3. p:nth-of-type(n)、選択範囲は 親要素 p 要素

   の n 番目の
4. 。これは、親要素内の

   p 要素の順序に従って計算され、取得されます。n は 1 から始まる 整数 であり、次の値にすることもできます。数式、またはキーワード Even (偶数)、odd (奇数) p:first-of-type の場合は、親要素の最初の p 要素が選択されます。 p:nth-of-type(1);

5. p

   :last-of-type と同じ効果で、選択範囲は親要素の最後の p 要素になります。前に n 番目がないことに注意してください。

p:nth-last-of-type(n)、選択範囲は親要素の最後の p 要素です。n 番目の p 要素ですが、
6. は最後の子から数えています

   、前に n 番目があることに注意してください。

p:nth-child(n)、選択は
7. 親要素要素

   のn番目の子であり、これは

   子の順序に従ってn
を計算します。親要素内の要素を調べてから、n 番目の子要素が p 要素であるかどうかを確認します
8. これにより、n 番目の子要素が p ではない可能性があり、取得できない状況が発生します

   。そのため、nth- を使用することをお勧めします。 of-type(n); p: first-child、選択はその親要素の最初の要素であり、p:nth-child(1) と同じです。 p:last-child、選択はその親要素の最後の要素であり、p 要素です p:nth-last-child (n)、選択はその親要素の n 番目の子要素であり、 p 要素である必要がありますが、

   は最後の子
から数えます。前に n 番目があることに注意してください。その他にもたくさんあります... .
疑似要素セレクター:

11. :first-letter、要素の最初の文字のスタイルを指定します。すべての

    先頭の句読点は最初の文字
と一緒にこのスタイルを適用する必要があり、
12. はブロックレベルの要素

    にのみ関連付けることができます。

: first-line
• 、要素内のテキストの最初の行のスタイルを設定します。

  はブロックレベルの要素にのみ関連付けることができます

1. : after

   、IE7 以前はサポートしていません。 :before、IE7 以前ではサポートされていません。生成されたコンテンツは要素コンテンツの最後に挿入されます。 、ユーザーが選択した部分と一致します

   は二重コロンの記述のみをサポートします
は 2 つのスタイルと背景色のみをサポートします

2. ;

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