Résumé des différences entre pseudo-classes et pseudo-éléments en CSS et CSS3

Dans le processus d'apprentissage du CSS, il est particulièrement facile de confondre deux notions : pseudo-classes et pseudo-éléments . La définition des deux dans le w3c est : Les pseudo-classes CSS sont utilisées pour ajouter des effets spéciaux à certains sélecteurs. Des pseudo-éléments CSS sont utilisés pour ajouter des effets spéciaux à certains sélecteurs. Les pseudo-classes étaient initialement utilisées pour représenter l'état dynamique de certains éléments, typiquement l'état des liens (LVHA). La norme CSS2 a ensuite élargi sa portée conceptuelle pour inclure toutes les catégories « fantômes » qui existent logiquement mais n'ont pas besoin d'être identifiées dans l'arborescence du document. Le pseudo-élément représente un élément enfant d'un élément Bien que cet élément enfant existe logiquement, il n'existe pas réellement dans l'arborescence du document. Parlons de la différence entre les pseudo-classes et les pseudo-éléments en CSS et CSS3.

Vous pouvez d'abord apprendre des cours gratuits liés au site Web php chinois

1. 《 Tutoriel CSS3 Du Débutant à la Maîtrise》中 sélecteur de pseudo-classe CSS3Cours

《 Tutoriel vidéo CSS Dark Horse pour les programmeurs" dans Pseudo-classes et pseudo-éléments Tutoriels vidéo associés

La différence entre les pseudo-classes et les pseudo-éléments

1 À propos des différences et des précautions entre les pseudo-classes et les pseudo-éléments en CSS3

En CSS3, la norme est que les pseudo-classes utilisent un seul deux-points ":" et les pseudo-éléments utilisent un double deux-points "::" (pour éviter toute confusion). Mais avant cela, les pseudo-classes et les pseudo-éléments). utilisé un seul deux-points ":", donc afin d'assurer la compatibilité avec les deux pseudo-éléments. Les deux méthodes d'utilisation sont possibles

Cependant, les versions inférieures d'IE ont des problèmes de compatibilité avec les doubles deux-points, donc les personnes qui ont écrit des styles dans le passé simplement utilisé des deux-points simples pour les pseudo-classes et les pseudo-éléments, provoquant la poursuite de cette confusion.

2.

La différence entre les pseudo-classes CSS et les pseudo-éléments

L'effet des pseudo-classes peut être obtenu en ajoutant une classe réelle, tandis que l'effet de Les pseudo-éléments doivent être obtenus par Cela peut être réalisé 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. La raison pour laquelle les pseudo-éléments et les pseudo-classes sont si faciles à confondre est qu'ils ont des effets et des méthodes d'écriture similaires. Cependant, en fait, afin de distinguer les deux, CSS3 a clairement stipulé que les pseudo-classes sont représentées par une seule. deux points, tandis que les pseudo-éléments sont représentés par deux deux points à exprimer.

3.

Explication des pseudo-classes et pseudo-éléments en CSS et les différences entre les deux

Les pseudo-classes CSS (Pseudoclasses) sont les boulons des sélecteurs, utilisé pour spécifier l'état d'un sélecteur ou de ses sélecteurs associés. Leur forme est selector:pseudoclass{property:value;}, utilisez simplement un deux-points anglais demi-largeur (:) pour séparer le sélecteur et la pseudo-classe.

De nombreuses suggestions CSS ne sont pas prises en charge par les navigateurs, mais il existe quatre pseudo-classes CSS pour les connexions qui peuvent être utilisées en toute sécurité. Le lien est utilisé pour les connexions d’accès. visité est utilisé pour les connexions qui ont déjà été visitées. Le survol est utilisé pour la connexion sur laquelle le curseur de la souris est placé. active est utilisé sur les connexions qui ont reçu le focus (par exemple, sur lesquelles on a cliqué).

4.

Introduction aux pseudo-éléments en CSS et leurs différences avec les pseudo-classes

Nous savons qu'à mesure que la spécification CSS est encore améliorée, le nouveau pseudo- les éléments deviennent de plus en plus nombreux, mais dans le développement quotidien, ceux que nous utilisons couramment et dont le support du navigateur est plus optimiste sont avant et après. Mais ce que nous utilisons dans le développement quotidien, c'est : après {content: ”;} pour effacer les flottants et ajouter un élément (en prenant soin de l'utilisation d'un seul deux-points dans les navigateurs IE8). Mais quelles sont les valeurs possibles du contenu). ?

5.

Un résumé des pseudo-éléments et pseudo-éléments d'attribut CSS courants

Les pseudo-classes étaient initialement utilisées pour représenter l'état dynamique de certains éléments, généralement liens couramment utilisés. Les différents états (lien, actif, survol, visité), puis la norme CSS2

a élargi sa portée conceptuelle, en faisant toutes les catégories "fantômes" qui existent logiquement mais ne sont pas identifiées 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. .

6. Une brève discussion sur les pseudo-classes et pseudo-éléments CSS

Les éléments de sélection de pseudo-classes sont basés sur l'état actuel de l'élément, ou l'état actuel de l'élément. Il a des caractéristiques, plutôt que des signes statiques tels que l'identifiant, la classe et les attributs de l'élément. Puisque l'état change dynamiquement, lorsqu'un élément atteint un état spécifique, il peut acquérir un style de pseudo-classe ; lorsque l'état change, il perdra ce style ; On peut voir que sa fonction est quelque peu similaire à celle d'une classe, mais elle est basée sur une abstraction en dehors du document, c'est pourquoi on l'appelle une pseudo-classe.

Questions et réponses connexes

1 Quelle est la différence entre les pseudo-classes et les pseudo-éléments ?

[Recommandations associées]

1. Tutoriel vidéo gratuit sur le site Web php chinois : "php.cn Dugu Jiujian (2)-css video tutoriel"

2. Tutoriel gratuit pour site Web PHP chinois : Manuel de référence CSS 3.0

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!