Pouvez-vous avoir plusieurs pseudo-éléments :before sur un seul élément ?

Pseudo-éléments multiples :avant

Un élément peut-il posséder plusieurs pseudo-éléments :avant ? Cette question se pose lors de l'application de styles au même élément à l'aide de jQuery, où seul le dernier style semble prendre effet.

Limites CSS2.1

En CSS2.1, un élément ne peut avoir qu'un seul pseudo-élément d'un type spécifique à un moment donné. Ainsi, un élément peut avoir à la fois des pseudo-éléments :before et :after, mais pas plus d'un de chaque.

Comportement en cascade

Règles :before multiples pour le le même élément est mis en cascade et appliqué à un seul pseudo-élément :before. La règle ayant la priorité la plus élevée, généralement la dernière, prévaut. Dans l'exemple fourni :

.circle:before {
    content: "CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

Seule la déclaration de contenu dans la dernière règle, "Maintenant", sera appliquée. Les déclarations restantes sont ignorées, comme pour les propriétés normales des éléments.

Combinaison de sélecteurs

Si plusieurs sélecteurs correspondent au même élément et que vous souhaitez appliquer tous leurs styles, générez des Règles CSS avec sélecteurs combinés. Pour l'exemple donné, ce serait .circle.now:before ou .now.circle:before.

Spécification de contenu CSS3 héritée

Le contenu css3 obsolète La spécification suggère une notation pour insérer plusieurs pseudo-éléments ::before et ::after compatibles avec la cascade CSS2.1. Cependant, cette fonctionnalité est obsolète et n'a été implémentée par aucun navigateur.

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!