フィルターセレクターとは何ですか?

フィルター セレクターには、first-child、:last-child、:nth-child、:nth-last-child、:only-child、:not、:empty、:checked、:enabled、:disabled が含まれます。および:フォーカスなど詳細な紹介: 1. :first-child、親要素の下にある最初の子要素を選択します; 2. :last-child、親要素の下にある最後の子要素を選択します、など。

このチュートリアルのオペレーティング システム: Windows 10 システム、DELL G3 コンピューター。

Web 開発では、フィルター セレクターを使用して、特定の条件またはルールに基づいて DOM 要素をフィルターして選択します。フィルター セレクターは、開発者が必要に応じて操作、スタイル変更、その他の処理のために特定の要素を選択するのに役立ちます。一般的なフィルター セレクターは次のとおりです:

1. :first-child: 親要素の下にある最初の子要素を選択します。たとえば、すべての親要素の下にある最初の子要素を選択します:

   :first-child {
     /* 样式 */
   }

2. :last-child: 親要素の下にある最後の子要素を選択します。たとえば、すべての親要素の下にある最後の子要素を選択します:

   :last-child {
     /* 样式 */
   }

3. :nth-child(n): 親要素の下にある n 番目の子要素を選択します。 n の値は、特定の数値または式を使用して指定できます。たとえば、親要素の下にある 3 番目の子要素を選択します:

   :nth-child(3) {
     /* 样式 */
   }

4. :nth-last-child(n): 親要素の下から n 番目の子要素を選択します。 :nth-child と同様に、特定の数値または式を使用して n の値を指定できます。たとえば、親要素の下で最後から 2 番目の子要素を選択します:

   :nth-last-child(2) {
     /* 样式 */
   }

5. :only-child: 親要素の下にある唯一の子要素を選択します。たとえば、すべての親要素の下で子要素を 1 つだけ選択する場合:

   :only-child {
     /* 样式 */
   }

6. :not(selector): 指定されたセレクターを満たさない要素を選択します。さまざまなセレクターを引数として使用して、特定の要素を除外できます。たとえば、`` タグではないすべての要素を選択します:

   :not(a) {
     /* 样式 */
   }

7. :empty: 子要素やテキスト コンテンツを持たない要素を選択します。たとえば、子要素を持たないすべての要素を選択します:

   :empty {
     /* 样式 */
   }

8. :checked: 選択したフォーム要素 (チェック ボックスやラジオ ボタンなど) を選択します。たとえば、選択したチェックボックスをすべて選択します:

   :checked {
     /* 样式 */
   }

9. :enabled および :disabled: 使用可能なフォーム要素と使用できないフォーム要素を選択します。たとえば、使用可能な入力ボックスをすべて選択します:

   :enabled {
     /* 样式 */
   }

10. :focus: 現在フォーカスされている要素を選択します。たとえば、現在フォーカスされている入力ボックスを選択します。