Introduction détaillée aux pseudo-classes et pseudo-éléments en CSS (exemples de code)

Le contenu de cet article est une introduction détaillée (exemple de code) sur les pseudo-classes et les pseudo-éléments en CSS. J'espère qu'il a une certaine valeur de référence. vous aidera.

1. Les pseudo-classes

les pseudo-classes comprennent deux types : pseudo-classe d'état (pseudo-classe UI) et pseudo-classe structurelle.

(1) La pseudo-classe de statut est sélectionnée en fonction de l'état actuel de l'élément.

L'état d'un élément change dynamiquement lors de l'interaction avec l'utilisateur, de sorte que l'élément présentera différents styles en fonction de son état. Ce style apparaîtra lorsque l'élément est dans un certain état et sera perdu lorsqu'il entrera dans un autre état.

Les pseudo-classes de statut courantes incluent principalement :

:le lien s'applique aux liens qui n'ont pas été visités
:le survol s'applique aux éléments survolés par la souris
 : active S'applique aux éléments activés ;
:visited s'applique aux liens visités, mutuellement exclusifs avec :link.
:focus s'applique aux éléments qui ont le focus de saisie au clavier.
:target s'applique à l'élément pointé après avoir cliqué sur le lien. Les résultats attendus seront affichés. Pour faciliter la mémorisation, pensez-y de cette façon : "

LoVe? HA!

" La lettre majuscule est la première lettre de chaque pseudo-classe. ajoutera une bordure bleue au champ de saisie lorsque le curseur est dans le champ. Cela permet à l'utilisateur de savoir clairement où les caractères saisis apparaîtront.

input:focus {border:1px solid blue;}

ajoutera un arrière-plan gris clair à l'élément avec l'ID more_info lorsque l'utilisateur clique sur le lien.

(2) La pseudo-classe structurelle est un nouveau sélecteur en CSS3

<a href="#more_info">More Information</a>
<h2 id="more_info">This is the information you are looking for.</h2> 
#more_info:target {background:#eee;}

Utilisez l'arborescence DOM pour filtrer les éléments et faire correspondre les éléments via la relation mutuelle de la structure du document, ce qui peut réduire la définition de attributs class et id , rendant la structure du document plus concise.

Les plus courants incluent :

:first-child sélectionne le premier élément enfant d'un élément

:last-child sélectionne le dernier élément enfant d'un élément

:nth ; -child() sélectionne un ou plusieurs éléments enfants spécifiques d'un élément ;

:nth-last-child() sélectionne un ou plusieurs éléments enfants spécifiques d'un élément, en commençant par le comptage à partir du dernier élément enfant

:nth-of-type() sélectionne l'élément spécifié ;
:nth-last-of-type() sélectionne l'élément spécifié et commence à compter à partir du dernier élément ;
:first-of-type sélectionne le premier ; élément enfant du même type sous un élément supérieur ;
:last-of-type sélectionne le dernier élément enfant du même type sous un élément supérieur
:only-child selects L'élément est le seul élément enfant de ; son élément parent ;
:only-of-type sélectionne un élément qui est le seul élément enfant du même type que son élément parent ;
:empty sélectionne un élément qui n'a pas de contenu.


2. Pseudo-éléments

Les pseudo-éléments opèrent sur un contenu spécifique dans l'élément, plutôt que de décrire l'état. Son niveau de fonctionnement est un niveau plus profond que celui des pseudo-classes, sa dynamique est donc bien inférieure à celle des pseudo-classes. En fait, les pseudo-éléments sont des choses qui ne peuvent pas être faites par des sélecteurs ordinaires avant ou après certains éléments. Le contenu du contrôle est le même que celui de l'élément, mais c'est une abstraction basée sur l'élément lui-même et n'existe pas dans la structure du document ! Les sélecteurs de pseudo-éléments courants incluent :

:first-letter sélectionne la première lettre (lettre) du texte de l'élément.

:first-line sélectionne la première ligne du texte de l'élément.

:before ajoute un nouveau contenu au début du contenu de l'élément.

:after ajoute un nouveau contenu à la fin du contenu de l'élément.

3. Remarque

Un seul deux-points (:) est utilisé pour les pseudo-classes CSS3 et un double deux-points (::) est utilisé pour les pseudo-éléments CSS3. afin d'être compatible avec certains navigateurs, généralement des deux-points simples sont utilisés. Les problèmes de compatibilité sont laissés au postcss. Cet article ne couvre pas les méthodes d'écriture de compatibilité, y compris les problèmes de préfixe, qui peuvent être laissés au préfixeur automatique. (Je ne comprends pas ce que signifie cette phrase. Voyons-y plus tard)

L'effet de pseudo-classe (pseudo-classe structurelle) peut être obtenu en ajoutant une classe réelle, tandis que l'effet de le pseudo-élément doit être obtenu en ajoutant un élément réel. C'est pourquoi l'un d'eux est appelé pseudo-classe et l'autre est appelé pseudo-élément.

4. Utilisation de pseudo-éléments

(1) Effacer les flotteurs

(2) Tracer des lignes de démarcation

.clear:after {
content: '';
display: block;
clear: both;
}

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!