Quels sont les sélecteurs de filtres ?

Les sélecteurs de filtres incluent : first-child, :last-child, :nth-child, :nth-last-child, :only-child, :not, :empty, :checked, :enabled, :disabled et :focus wait . Introduction détaillée : 1. :first-child, sélectionne le premier élément enfant sous l'élément parent ; 2. :last-child, sélectionne le dernier élément enfant sous l'élément parent, etc.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.

Dans le développement Web, les sélecteurs de filtres sont utilisés pour filtrer et sélectionner les éléments DOM en fonction de conditions ou de règles spécifiques. Les sélecteurs de filtres peuvent aider les développeurs à sélectionner des éléments spécifiques à manipuler, à modifier le style ou à effectuer tout autre traitement selon les besoins. Voici les sélecteurs de filtre courants :

1. :first-child : sélectionnez le premier élément enfant sous l'élément parent. Par exemple, sélectionnez le premier élément enfant sous tous les éléments parents :

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

2 :last-child : Sélectionnez le dernier élément enfant sous l'élément parent. Par exemple, sélectionnez le dernier élément enfant sous tous les éléments parents :

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

3 :nth-child(n) : sélectionnez le nième élément enfant sous l'élément parent. La valeur de n peut être spécifiée à l'aide de nombres ou de formules spécifiques. Par exemple, sélectionnez le 3ème élément enfant sous l'élément parent :

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

4. :nth-last-child(n) : Sélectionnez le nième élément enfant en bas sous l'élément parent. Semblable à :nth-child, vous pouvez utiliser des nombres ou des formules spécifiques pour spécifier la valeur de n. Par exemple, sélectionnez l'avant-dernier élément enfant sous l'élément parent :

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

5 :only-child : Sélectionnez le seul élément enfant sous l'élément parent. Par exemple, lors de la sélection d'un seul élément enfant sous tous les éléments parents :

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

6 :not(selector) : Sélectionnez les éléments qui ne satisfont pas au sélecteur spécifié. Divers sélecteurs peuvent être utilisés comme arguments pour exclure des éléments spécifiques. Par exemple, sélectionnez tous les éléments qui ne sont pas des balises `` :

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

7 : vide : sélectionnez les éléments qui n'ont pas d'éléments enfants ni de contenu textuel. Par exemple, sélectionnez tous les éléments qui n'ont pas d'éléments enfants :

   :empty {
     /* 样式 */
   }

8 :checked : Sélectionnez les éléments de formulaire sélectionnés (tels que les cases à cocher ou les boutons radio). Par exemple, cochez toutes les cases cochées :

   :checked {
     /* 样式 */
   }

9 :enabled et :disabled : sélectionnez les éléments de formulaire disponibles et non disponibles. Par exemple, sélectionnez toutes les zones de saisie disponibles :

   :enabled {
     /* 样式 */
   }

10 :focus : Sélectionnez l'élément actuellement ciblé. Par exemple, sélectionnez la zone de saisie actuellement obtenue :