Pouvez-vous appliquer plusieurs pseudo-éléments :before à un seul élément ?

Plusieurs pseudo-éléments :avant peuvent-ils améliorer le même élément ?

Introduction :
Lors de l'utilisation de CSS, une question courante se pose : plusieurs pseudo-éléments :before peuvent-ils être appliqués à un seul élément ? Pour comprendre la réponse, approfondissons le concept de pseudo-éléments et explorons comment ils interagissent avec la cascade.

Pseudo-éléments CSS et cascade :
En CSS2.1 , un élément ne peut posséder qu'un seul pseudo-élément d'un type spécifique à la fois, comme :before ou :after. Cela signifie qu'un élément peut avoir les deux, mais pas plusieurs instances du même type.

Exemple d'utilisation de jQuery :
Comme illustré dans le code donné, tenter d'appliquer plusieurs pseudo :before -éléments sur un élément à l'aide de jQuery, seul le dernier prend effet :

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

Comportement en cascade :
Lorsque plusieurs règles :before s'appliquent au même élément, elles se suivent les règles en cascade, où la règle ayant la priorité la plus élevée (la dernière) remplace les autres. Il en résulte un seul pseudo-élément :before avec les déclarations de la dernière règle uniquement, comme dans ce qui suit :

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

Surmonter la limitation :
Si plusieurs :before Si des déclarations sont souhaitées pour le même élément, il faut créer des règles CSS supplémentaires avec des sélecteurs combinés. Cela permet de spécifier le comportement souhaité pour différentes combinaisons de classes :

.circle.now:before { /* Specific rule for .circle with .now */ }
.now.circle:before { /* Specific rule for .now with .circle */ }

Héritage CSS et développements futurs :
La spécification obsolète css3-content proposait d'insérer plusieurs pseudo-éléments à l'aide d'un notation compatible avec la cascade CSS2.1. Cependant, cette fonctionnalité n’a jamais été implémentée. Actuellement, les versions css-content-3 et css-pseudo-4 omettent cette fonctionnalité en raison d'un manque d'intérêt.

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!