Plusieurs pseudo-éléments :before peuvent-ils être appliqués à un seul élément HTML ?

Multiple : avant les pseudo-éléments : un aperçu des restrictions

Question :

Peut-on plusieurs :avant que les pseudo-éléments soient appliqués à un seul code HTML element?

Réponse :

Malheureusement, il n'est pas possible d'avoir plusieurs pseudo-éléments :before pour le même élément en CSS2.1. Un élément ne peut avoir qu'un seul pseudo-élément de n'importe quel type à la fois, y compris :before et :after.

Explication :

Lorsque plusieurs règles :before s'appliquent au même élément, ils cascadent et fusionnent en un seul pseudo-élément :before. Seule la règle la plus haute, avec la priorité la plus élevée, voit ses déclarations appliquées. Ceci est cohérent avec le fonctionnement de la cascade pour les propriétés CSS classiques.

Par conséquent, dans votre exemple :

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

Seule la deuxième règle sera appliquée et le résultat sera :

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

Approches alternatives :

Pour surmonter cette limitation, vous pouvez soit :

• Combinez plusieurs règles en un seul sélecteur, tel que .circle.now:before, qui appliquerait les deux règles à l'élément.
• Utilisez un préprocesseur CSS comme Sass ou Less, qui vous permet d'imbriquer des sélecteurs et de créer plusieurs pseudo-éléments :before pour le même élément.

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!