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

  En CSS3, les pseudo-classes et les pseudo-éléments sont également grammaticalement différents, et les pseudo-éléments sont modifiés pour commencez par

.

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

41f43794634921107c9852f2ce3cfb8c

:activeSélectionnez l'élément en cours d'activation1:hoverSélectionnez pour être survolé par la souris Élément 1:lienSélectionnez les éléments non visités1:visitéSélectionnez les éléments visités1:premier-enfant Choisir de satisfaire L'élément qui est le premier enfant de son élément parent2:langSélectionne l'élément avec l'attribut lang spécifié2:focusSélectionne l'élément avec la saisie au clavier focus1 Élément sélectionné 3:targetSélectionnez l'élément d'ancrage actuel3::première-lettre::first-line::after

deab5ff6b6199f9273537ef17277b26f
select Spécifier Le premier mot de l'élément	1
Sélectionne la première ligne de l'élément spécifié	1

Insère le contenu après le contenu du élément spécifié

2

::beforeInsérer le contenu avant le contenu de l'élément spécifié2::selectionSélectionner le contenu sélectionné par l'utilisateur dans l'élément spécifié3

Les pseudo-classes ont la même priorité que les classes, et les pseudo-éléments ont la même priorité que les balises. À propos, comment juger la priorité est généralement !important > Style en ligne > Sélecteur d'ID > Sélecteur de classe > Marque générique > Attribut par défaut du navigateur. Il existe également une méthode de calcul simple. Le poids de la feuille de style en ligne est de 1 000, le poids du sélecteur d'ID est de 100, le poids du sélecteur de classe est de 10, le poids du sélecteur de balise HTML est de 1 et le poids est de 1. en fait, il n'est pas calculé en décimal. La représentation numérique est juste pour illustrer l'idée. On peut ajouter les règles dans le sélecteur et comparer les poids, plus la priorité est élevée. Si les poids sont les mêmes, le précédent. les styles seront remplacés par les versions ultérieures.

(Partage de vidéos d'apprentissage : Tutoriel vidéo 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!