Que signifient un deux-points et deux deux-points en CSS ?

Un deux-points est une pseudo-classe, et deux deux-points sont des pseudo-éléments.

(Apprentissage recommandé : Démarrage rapide CSS)

Les pseudo-classes peuvent attribuer des styles indépendamment des éléments du document, et peuvent être affectées à n'importe quel élément , logiquement, elle est similaire à une classe en fonction, mais elle est prédéfinie, n'existe pas dans l'arborescence du document et s'exprime d'une manière différente, c'est pourquoi on l'appelle une pseudo-classe.

Le contenu contrôlé par un pseudo-élément est le même que le contenu contrôlé par un élément, mais le pseudo-élément n'existe pas dans l'arborescence du document et n'est pas un élément réel, on l'appelle donc un pseudo-élément.

Les pseudo-classes incluent : :first-child, :link:, visitited, :hover:, active:focus, :lang

Les pseudo-éléments incluent : :first-line, :first -letter , :before, :after

La différence entre pseudo-classe et pseudo-élément :

pseudo-classe

Élément de sélection de pseudo-classe Il est basé sur l'état actuel de l'élément, ou sur les caractéristiques actuelles de l'élément, plutôt que sur des signes statiques tels que l'identifiant, la classe et les attributs de l'élément.

Étant donné que l'état change dynamiquement, lorsqu'un élément atteint un état spécifique, il peut obtenir 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.

:link

la pseudo-classe sera appliquée aux liens non visités et s'exclut mutuellement avec :visited. La pseudo-classe

:hover

sera appliquée à l'élément survolé par le pointeur de la souris. La pseudo-classe

:active

sera appliquée aux éléments activés, tels que les liens cliqués, les boutons enfoncés, etc. La pseudo-classe

:visited

sera appliquée aux liens qui ont été visités et s'exclut mutuellement avec :link. La pseudo-classe

:focus

sera appliquée aux éléments qui ont le focus de saisie au clavier. La pseudo-classe

:first-child

sera appliquée lorsque l'élément apparaît pour la première fois sur la page. La pseudo-classe

:lang

sera appliquée aux éléments avec la langue spécifiée.

Pseudo-élément

Différent des pseudo-classes qui ciblent des éléments dans un état spécial, les pseudo-éléments opèrent sur un contenu spécifique dans l'élément et sur le niveau auquel il opère C'est relativement vrai. Les pseudo-classes sont un niveau plus profond et donc beaucoup moins dynamiques que les pseudo-classes.

En fait, le but de la conception de pseudo-éléments est de sélectionner la première lettre (lettre) et la première ligne du contenu de l'élément, et de sélectionner le recto ou le verso de certains contenus, ce que les sélecteurs ordinaires ne peuvent pas faire. . Le contenu qu'il contrôle est en fait le même que l'élément, mais il ne s'agit que d'une abstraction basée sur l'élément et n'existe pas dans le document, c'est pourquoi on l'appelle un pseudo-élément. Le style du pseudo-élément

::first-letter

sera appliqué à la première lettre du texte de l'élément. Le style du pseudo-élément

::first-line

sera appliqué à 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.

::before et ::after sont souvent utilisés avec la génération de contenu CSS.

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!