La différence entre un deux-points (:) et deux deux-points (::) en CSS

Recommandé : Tutoriel vidéo CSS

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

Les pseudo-classes peuvent attribuer des styles indépendamment des éléments du document et peuvent être affectées à n'importe quel élément. Elles sont logiquement similaires aux classes fonctionnelles, mais elles sont prédéfinies et ne le sont pas. existent dans le document. Les méthodes d’expression sont différentes dans l’arborescence, elles sont donc appelées pseudo-classes.

Le contenu contrôlé par un pseudo élément est le même que celui 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.

La pseudo-classe a : :premier enfant , :link:, visité, :hover:, active:focus, :lang

Les pseudo-éléments incluent : :first-line, :first-letter, :before, :after (en CSS2 compilé par Su Chen Xiaoyu .0 Dans le manuel chinois, :first-line et :first-letter sont répertoriés comme pseudo-classes, ce qui devrait être un malentendu)

Rappel, si votre site Web doit uniquement être compatible avec webkit , Firefox, Opera et autres navigateurs, il est recommandé d'utiliser l'écriture à deux points pour les pseudo-éléments. Si vous devez être compatible avec le navigateur IE, il est plus sûr de l'utiliser. Écriture CSS2 à deux points simples

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

Pseudo-classe

L'élément de sélection de pseudo-classe

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 le l'identifiant de l'élément, la classe, les attributs, etc. 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.

:link

la pseudo-classe sera appliquée aux liens non visités, de la même manière que :visited Mutuellement exclusifs. La pseudo-classe

:hover

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

:active

la pseudo-classe 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 déjà visités, contrairement à :link s'excluent mutuellement. La pseudo-classe

:focus

sera appliquée à l'élément qui a 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

Contrairement aux pseudo-classes qui ciblent des éléments avec des états spéciaux, les pseudo-éléments ciblent un contenu spécifique dans l'élément Lorsqu'il fonctionne, le niveau qu'il opère est un niveau plus profond que celui des pseudo-classes, et donc sa nature dynamique est bien inférieure à celle des 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, ainsi que 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.

::première-lettre

Le style du pseudo-élément sera appliqué au premier mot de le texte de l'élément (mère).

::first-line

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

::before

Ajoute un nouveau contenu au début du contenu de l'élément.

::après

Ajouter un nouveau contenu à la fin du contenu de l'élément.

::avant et : :after est souvent utilisé avec la génération de contenu CSS.

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

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!