Que sont les sélecteurs de pseudo-classe front-end ?

Les sélecteurs de pseudo-classe front-end incluent :hover, :active, :focus, :first-child, :last-child, :nth-child(), :nth-of-type() et :not(), etc. Introduction détaillée : 1. Le sélecteur de pseudo-classe :hover est utilisé pour appliquer des styles lorsque la souris survole un élément. Il est souvent utilisé pour créer des effets interactifs, comme changer sa couleur ou son arrière-plan lorsque la souris survole un lien. ; 2. : pseudo-classe active Les sélecteurs de classe sont utilisés pour appliquer des styles lorsqu'un élément est activé, etc.

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

Les sélecteurs de pseudo-classes front-end sont une partie très importante du CSS, ils nous permettent de sélectionner et d'appliquer des styles en fonction de l'état ou de la position des éléments. Dans cet article, nous présenterons quelques sélecteurs de pseudo-classes frontaux courants.

1. :sélecteur de pseudo-classe en survol

:le sélecteur de pseudo-classe en survol est utilisé pour appliquer des styles lorsque la souris survole l'élément. Il est souvent utilisé pour créer des effets interactifs, comme changer la couleur ou l’arrière-plan d’un lien lorsque la souris passe dessus.

Exemple :

a:hover {
  color: blue;
}

2. :sélecteur de pseudo-classe actif

 : le sélecteur de pseudo-classe actif est utilisé pour appliquer des styles lorsque l'élément est activé. Il est souvent utilisé pour les effets de clic sur des boutons ou des liens, comme changer la couleur ou l'arrière-plan d'un bouton lorsque l'utilisateur clique dessus.

Exemple :

button:active {
  background-color: yellow;
}

3. :sélecteur de pseudo-classe focus

:le sélecteur de pseudo-classe focus est utilisé pour appliquer des styles lorsqu'un élément obtient le focus. Il est souvent utilisé sur des éléments de formulaire, comme pour changer la couleur de la bordure ou l'arrière-plan d'une zone de saisie lorsque l'utilisateur clique dessus.

Exemple :

input:focus {
  border-color: red;
}

4. :sélecteur de pseudo-classe du premier enfant

 : le sélecteur de pseudo-classe du premier enfant est utilisé pour sélectionner le premier élément enfant de l'élément parent. Il est souvent utilisé pour appliquer un style spécial au premier élément d’une liste.

Exemple :

ul li:first-child {
  font-weight: bold;
}

5. :sélecteur de pseudo-classe du dernier enfant

 : le sélecteur de pseudo-classe du dernier enfant est utilisé pour sélectionner le dernier élément enfant de l'élément parent. Il est souvent utilisé pour appliquer un style spécial au dernier élément d’une liste.

Exemple :

ul li:last-child {
  color: red;
}

6. :nth-child() sélecteur de pseudo-classe

:nth-child() le sélecteur de pseudo-classe est utilisé pour sélectionner des éléments enfants à une position spécifique de l'élément parent. Il peut accepter un paramètre qui spécifie la position de l'élément enfant à sélectionner.

Exemple :

ul li:nth-child(odd) {
  background-color: lightgray;
}

7. Sélecteur de pseudo-classe :nth-of-type()

:le sélecteur de pseudo-classe nth-of-type() est utilisé pour sélectionner des éléments enfants d'un type spécifique d'élément parent. Il peut accepter un paramètre qui spécifie la position de l'élément enfant à sélectionner.

Exemple :

ul li:nth-of-type(2n) {
  color: blue;
}

8. Le sélecteur de pseudo-classe :not()

:not() le sélecteur de pseudo-classe est utilisé pour sélectionner des éléments qui ne remplissent pas les conditions spécifiées. Il peut accepter un paramètre qui spécifie les éléments à exclure.

Exemple :

input:not([type="text"]) {
  display: none;
}

Ce sont des sélecteurs de pseudo-classes courants sur le front-end, ils peuvent nous aider à sélectionner et à appliquer des styles en fonction de l'état ou de la position des éléments. En utilisant de manière flexible ces sélecteurs de pseudo-classes, nous pouvons ajouter davantage d'effets interactifs et de styles personnalisés aux pages Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!