Un petit rappel que les pseudo-éléments sont des enfants, un peu.

Pseudo-élément: il ressemble à un élément enfant, pas exactement comme ça

Regardons un conteneur contenant des éléments enfants:

<div class="container">
  <div>article</div>
  <div>article</div>
  <div>article</div>
</div>

Si nous ajoutons le style suivant:

 .Container :: avant {
  Contenu: "x";
}

L'effet est équivalent à:

<div class="container">
  [[[:: avant pseudo-élément]]]]
  <div>article</div>
  <div>article</div>
  <div>article</div>
</div>

Le comportement des pseudo-éléments est similaire à celui des éléments enfants dans la plupart des cas. Cependant, une différence importante est qu'aucun autre sélecteur ne peut le sélectionner directement, sauf pour le sélecteur qui le crée (ou des sélecteurs similaires tels que ::before ou ::after ).

Par exemple, supposons que nous définissons le conteneur sur une grille 2x3, chaque élément enfant étant une conception en forme de pilule:

 .Container {
  Affichage: grille;
  grille-template-colonnes: 1fr 1fr;
  GRID-GAP: 0,5rem;
}

.Container> * {
  Contexte: Darkgray;
  Border-Radius: 4px;
  rembourrage: 0,5rem;
}

S'il n'y a pas de pseudo-éléments, l'effet est comme prévu. Mais après avoir ajouté le pseudo-élément, vous constaterez qu'il participe à la disposition de la grille, qui peut être inattendu. Les pseudo-éléments sont souvent utilisés à des fins décoratives, et il semble un peu étrange de participer à la disposition du contenu.

Notez que .container > * ne fait pas non plus le gris foncé pseudo-élément, car vous ne pouvez pas sélectionner le pseudo-élément de cette façon. Ceci est un autre petit problème à noter.

Dans le développement quotidien, les pseudo-éléments utilisent généralement position: absolute pour les opérations décoratives:

 .Container :: avant {
  contenu: "";
  Position: absolue;
  / * Style décoratif * /
}

Dans ce cas, vous ne remarquerez peut-être pas du tout l'existence du pseudo-élément. Bien qu'il s'agisse toujours technique d'un élément enfant, participant à la structure DOM, il ne participe pas à la disposition de la grille. Ce n'est pas un phénomène unique à la grille CSS. Dans Flexbox, les pseudo-éléments deviendront également des projets Flex. Vous pouvez contrôler les pseudo-éléments comme vous aimez utiliser des méthodes flottantes ou d'autres dispositions.

Les outils de développeur montrent clairement que les pseudo-éléments sont similaires aux éléments enfants du DOM.

Il y a d'autres problèmes à noter:

La première est :nth-child() Sélecteur. Vous pourriez penser que si les pseudo-éléments sont des éléments enfants, ils affecteront le calcul :nth-child() , mais ce n'est pas le cas. Cela signifie:

 .Container>: Nth-Child (2) {
  Contexte: rouge;
}

Le même élément est sélectionné, que le ::before le pseudo-élément existe ou non. Il en va de même pour les sélecteurs tels que ::after , :nth-last-child , etc. C'est pourquoi "un peu" dans le titre. Si les pseudo-éléments sont exactement comme des éléments enfants, ils affectent ces sélecteurs.

Un autre problème est que vous ne pouvez pas sélectionner des pseudo-éléments en JavaScript comme vous choisissez des éléments enfants normaux. document.querySelector(".container::before"); reviendra null . Si vous devez accéder au style des pseudo-éléments en JavaScript, vous pouvez utiliser CSSOM:

 const Styles = window.getCompuledStyle (
  document.QuerySelector ('. Container'),
  '::avant'
));
Console.log (Styles.Content); // "x"
Console.log (Styles.Color); // RVB (255, 0, 0)
Console.log (Styles.GetPropertyValue ('Color')); // RVB (255, 0, 0)

Avez-vous rencontré d'autres problèmes avec les pseudo-éléments?

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!