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

Question

Quelle est la différence entre div::after {} et div:after {} ? Quand doit-on utiliser :: sur :?

Double deux-points et un seul colon notation est de faire la distinction entre les pseudo-classes et pseudo-éléments.

Quelle est la signification réelle de la déclaration ci-dessus?

Answer 1

À partir de https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements

La Pseudo-classe :

Un CSS pseudo-classe est un mot-clé, précédé par un signe deux-points (:), ajouté à la fin de sélecteurs pour spécifier que vous voulez de style les éléments sélectionnés, et seulement quand ils sont dans certains états. Par exemple, vous pourriez le style d'un élément lorsqu'il est survolé par le pointeur de la souris, ou une case à cocher lorsqu'elle est désactivée ou activée, ou un élément qui est le premier enfant de son parent dans l'arborescence DOM.

Exemples:

• :active
• :vérifié
• :nth-child()
• :première
• :hover

Les Pseudo-éléments ::

Pseudo-éléments sont très bien comme les pseudo-classes, mais ils ont des différences. Ils sont des mots-clés, cette fois précédée par deux-points (::), qui peut être ajouté à la fin de sélecteurs pour sélectionner une partie d'un élément.

Exemples:

• ::après
• ::avant
• ::first-letter
• ::first-line
• ::la sélection
• ::la toile de fond

Answer 2

Les Pseudo-classes : il est appliqué automatiquement par le navigateur en fonction de la position de l'élément ou de son interactif.

Par Exemple :

E:hover Correspond à des éléments de type E lorsque le curseur est planant au-dessus d'elle.

Les Pseudo-éléments : Il s'applique styles de contenu en fonction de sa position dans le code HTML de la hiérarchie.

Par Exemple :

E::first-letter Cette applique un style à la première lettre de la première ligne à l'intérieur d'un bloc de niveau élément de E.

Donc ,

Les Sélecteurs CSS3 spécification des préfixes pseudo-éléments avec deux points au lieu d'un. Donc, :first–letter devient ::first-letter et :première ligne devient ::first-line. IE 8 et versions antérieures ne comprends pas le double deux-points préfixe, donc vous avez besoin d'utiliser le seul colon versions afin d'éviter les styles de rupture dans les navigateurs plus anciens.