Que signifie ::avant en CSS

"::before" en CSS signifie "avant...". C'est un élément de pseudo-classe utilisé pour créer un pseudo-élément et le définir comme premier élément enfant de l'élément sélectionné et l'insérer dans l'élément. avant tout autre contenu, la syntaxe est "element::before{style code}".

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Que signifie ::before en CSS ?

En CSS, ::before est un élément pseudo-classe qui représente l'élément de contenu généré et représente le premier sous-élément du style abstractable de l'élément correspondant , soit : Le premier élément enfant de l'élément sélectionné.

Utilisez ::before pour insérer le contenu à insérer avant l'autre contenu de l'élément, et affichez-le en ligne par défaut. ::before requiert l'attribut content pour spécifier la valeur du contenu.

::avant les scénarios d'utilisation (comme l'ajout d'une icône devant un élément)

<p class="test">
     2019/11/29 15:35:51
</p>//在这前面加一个小闹钟的图标就可使用::befor

.test::before
  {
   content: url(./1597910280\(1\).png);
 }

Mêmes points :

1 Objet pseudo-classe, utilisé pour définir le contenu avant l'objet

2. . ::before La méthode d'écriture de :before est équivalente à

La différence :

:before est écrit en Css2, ::before est écrit en Css3

:before a une meilleure compatibilité que ::before, mais c'est recommandé. à utiliser dans le développement H5 ::avant, c'est mieux

Explication :

1. Les éléments de pseudo-classe doivent être utilisés avec l'attribut de contenu

2. Les éléments de pseudo-classe sont ajoutés par la couche de rendu CSS et ne peuvent pas. être exploité par js

3. Objets de pseudo-classe Les effets spéciaux sont généralement activés via : le survol du style pseudo-classe

Je pense que c'est un peu inutile, vous pouvez l'utiliser ou non.

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

• Les pseudo-classes

Les pseudo-classes sont utilisées pour sélectionner des informations en dehors de l'arborescence DOM, ou des informations qui ne peuvent pas être représentées par de simples sélecteurs. Le premier inclut les éléments qui correspondent à l'état spécifié, tels que :visited, :active ; le second inclut les éléments de l'arborescence DOM qui remplissent certaines conditions logiques, telles que :first-child, :first-of-type, :target. . Les pseudo-classes CSS sont utilisées pour ajouter des effets spéciaux à certains sélecteurs.

• Pseudo-éléments

Les pseudo-éléments sont des éléments virtuels qui ne sont pas définis dans l'arborescence DOM. Contrairement aux autres sélecteurs, il ne prend pas l'élément comme plus petite unité de sélection, il sélectionne le contenu spécifié de l'élément. Par exemple ::before signifie le contenu avant l'élément sélectionné, c'est-à-dire "" ::selection signifie le contenu sélectionné de l'élément sélectionné. Les pseudo-éléments CSS sont utilisés pour définir des effets spéciaux sur certains sélecteurs.                                                                            Différence grammaticale

.

3) Liste des pseudo-classes/pseudo-éléments::开头。但因为历史原因，浏览器对以:开头的伪元素也继续支持，但建议规范书写为::