Résumé des pseudo-éléments et pseudo-éléments des attributs communs CSS

Dans les fois précédentes, nous avons parlé respectivement du sélecteur d'identifiant et du sélecteur de classe, ainsi que de leurs différences et connexions. Explorons ensemble les classes magiques et les pseudo-éléments.

En fait, j'étais confus au sujet des pseudo-classes et des pseudo-éléments auparavant. Maintenant, j'ai décidé de retirer son mystérieux manteau. Tout d'abord, qu'est-ce qu'une pseudo-classe ? Que sont les pseudo-éléments ?

Compréhension des pseudo-classes et des pseudo-éléments :

Explication officielle :

Les pseudo-classes étaient initialement utilisées pour représenter l'état dynamique de certains éléments, des liens généralement couramment utilisés . Les différents états (lien, actif, survol, visité), puis la norme CSS2
a élargi sa portée conceptuelle, en faisant toutes des catégories "fantômes" qui existent logiquement mais n'ont aucune identité dans l'arborescence du document. Le pseudo-élément

représente un sous-élément d'un certain élément Bien que ce sous-élément existe logiquement, il n'existe pas réellement dans l'arborescence du document, comme l'après, l'avant, etc. que nous utilisons habituellement. .

Ma compréhension approximative est qu'une pseudo-classe est une classe qui n'a pas besoin d'être identifiée, et qu'un pseudo-élément est un élément, mais il n'existe pas dans l'arborescence du document.

À propos de l'utilisation : Les pseudo-classes sont précédées de deux points, et les pseudo-éléments sont précédés de deux deux-points. E:pseudo-classe de premier enfant, E::pseudo-élément de première ligne. Il s'agit de la dernière norme CSS3, mais dans CSS2,
utilise deux points pour après et avant, donc tout le monde doit y prêter attention. De plus, CSS3 a également étendu de nombreuses pseudo-classes, que je ne mentionnerai pas ici. Si cela vous intéresse, vous pouvez vérifier les informations vous-même.

Applications courantes :
Pseudo-classe :
1.a style de liencliquez sur le lien la police devient rouge.

2. Changement de couleur entrelacé

• 1
• 2
• 3
• 4

ul li:nth-child(even){background-color:#ccc} ou ul li:nth-chilid(2):{background-clolor:#ccc}

pseudo-élément :
Nettoyer les flotteurs :
.clear{zoom:1}
.clear:after{display:block;content:'';clear:both;}

À propos des pseudo-classes et pseudo-éléments, c'est tout pour l'instant. Concernant les pseudo-classes et les pseudo-éléments, de nombreux effets intéressants peuvent être obtenus.

Pour plus d'articles liés au résumé des pseudo-éléments et pseudo-éléments des attributs CSS courants, veuillez faire attention au site Web PHP chinois !