Résumé des sélecteurs CSS couramment utilisés

Une lecture incontournable pour zéro base du HTML - pour débuter avec HTML, la programmation est si simple

1. Sélecteur principal

1. Nommez le sélecteur avec le nom de la balise tel que p{ }
2. Avec le sélecteur #id comme #one{ ]
3. Avec un sélecteur de nom de classe .tel que .box
4. Les sélecteurs génériques tels que { } peuvent être utilisés pour effacer le style par défaut
5. Utilisez des espaces pour descendre le sélecteur (parent, descendant...) tel que div box p{ }
6. Pour, des sélecteurs parallèles (plusieurs sélecteurs utilisent le même style) tels que p,span,li{ }
7. Le sélecteur > descendant est couramment utilisé (la plage exacte est en minuscules = certains, plus précis) comme div>ul>.li1 { }
8. Utilisez ~ pour associer le sélecteur (frère ~ suit tous les jeunes frères)
9. Prendre + sélecteur de frère ou sœur adjacent (frère + à côté d'un frère cadet)

2. Sélecteur d'attribut

• Sélectionner par attribut

Par exemple : a[target]{color: red; }
sélectionnez la balise avec l'attribut target dans la balise a puis ajoutez un style de police rouge

• Sélectionnez par attributs, puis affinez la sélection par valeurs d'attribut

Par exemple : a[target$="k"]{ color: green; }
recherchez la balise avec l'attribut cible de la balise a et la valeur de l'attribut se termine par k.

Par exemple : a[href^="h"]{color: pink; }
recherchez une balise qui possède l'attribut href de la balise a et dont la valeur d'attribut commence par h.

Par exemple : a[target*="se"]{ color: skyblue; }
recherchez une balise qui possède l'attribut cible de la balise a et contient la valeur d'attribut des deux caractères se

3. Sélecteur de pseudo-classe

3.1 Classe de statut

Le style d'un élément change dans un état spécifique

Statut de la souris :

1. :hoverÉtat de survol couramment utilisé
2. :activeÉtat du clic de souris

À utiliser uniquement avec la balise a :

3. linkLiens non visités ( utilisés uniquement par un tag )
4. :visitedLiens qui ont été visités ( uniquement pour la balise a )

Uniquement dans l'état de contrôle du formulaire de saisie :
5. :focusLorsque la zone de saisie du formulaire est sélectionnée (le style par défaut doit d'abord être effacé)
6. :checkedLorsque le formulaire est coché (sélection unique/sélection multiple)

3.2 Classe structurelle

Structure : Sélecteur d'élément enfant :nth-child(n)

1. Le parent sélectionne l'un des fils suivants : nième-enfant(n)
   tel que :ul>li:nth-child(3)
2. Sélectionnez le premier élément enfant premier-enfant de l'élément parent
   tel que :ul>li:first-child
3. Sélectionnez le dernier élément enfant, dernier enfant de l'élément parent,
   tel que :ul>li:last-child
4. Sélectionnez tous les éléments impairs impairs/2n-1 de l'élément parent
   tels que :ul>li:nth-child(2n-1)或 ul>li:nth-child(odd)
5. Sélectionnez tous les éléments pairs pair/2n de l'élément parent
   tels que :ul>li:nth-child(2n)或 ul>li:nth-child(even )
6. Sélectionnez plusieurs éléments spécifiés en même temps, à l'aide du sélecteur parallèle (,) au milieu,
   tel que :li:nth-child(1),li:nth-child(4)
7. Indique la sélection du mois au dernier,
   par exemple :ul>li:nth-child(n+3)

4. Sélecteur de pseudo-éléments

4.1 Comment écrire des sélecteurs de pseudo-éléments

• E::before équivaut à ajouter un sous-élément supplémentaire au début de l'élément E,
  tel que :p::before{content:"Hello World!"}
• E::after équivaut à ajouter un sous-élément supplémentaire à la fin de l'élément E.
  Par exemple,p::after {content:"Hello World!"}
::afte il est souvent utilisé pour effacer les flotteurs. Le problème de l'effondrement en hauteur des flotteurs a été abordé au chapitre 10.

4.2 Remarque

• Vous devez disposer contentde styles pour que les deux pseudo-éléments ci-dessus prennent effet.
• L'élément enfant créé doit être un élément en ligne .
• contentEn plus d'écrire du texte, vous pouvez également utiliser l'URL pour spécifier une image et d'autres méthodes d'écriture.

4.3 Différence entre les sélecteurs de pseudo-classe et les sélecteurs de pseudo-éléments

• Le sélecteur de pseudo-classe équivaut à l'ajout d'un nom de classe virtuelle dans certaines circonstances, tandis que le sélecteur de pseudo-éléments équivaut à la création d'un élément virtuel.
• Pseudo-classe : modifiera uniquement le style de l'état de l'élément. (Utilisez-en un :)
• Classe pseudo-élément : crée un nouvel élément virtuel. (Utilisez-en deux : )

5. Comparaison prioritaire des styles

!important > styles en ligne > id > descendants > classe | attributs | pseudo-classes |
pseudo-éléments > balises | + (adjacent) | ~ (associé) | > * caractère générique

Résumer

Ci-dessus sont quelques-uns des sélecteurs les plus importants en CSS que l'éditeur a compilés pour vous et les a résumés par catégorie. Il a été compilé en référence à diverses sources et à ma propre compréhension. S'il peut y avoir des inexactitudes et des omissions, j'espère que vous pourrez m'éclairer et apporter des corrections. Je vous remercie d'avance.