Plusieurs pseudo-éléments :before peuvent-ils être appliqués au même élément ?

Plusieurs pseudo-éléments :before pour le même élément

Plusieurs pseudo-éléments :before peuvent-ils être appliqués au même élément HTML ?

Considérez le scénario suivant :

<p>Is it possible to have multiple :before pseudos for the same element?</p>

<pre class="brush:php;toolbar:false">.circle:before {
    content: "CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

I am trying to apply the above styles to the same element using jQuery, but only the most recent one is applied, never both of them.

En CSS2.1, un élément ne peut posséder qu'un seul pseudo-élément de chaque type à un moment donné. Par conséquent, lorsque plusieurs règles :before ciblent le même élément, elles se cascadent pour former un seul pseudo-élément :before. Dans l'exemple fourni, le résultat est le suivant :

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

La déclaration de contenu déclarée la plus récemment est prioritaire, tandis que les autres déclarations sont ignorées. Ce comportement est similaire à celui des propriétés CSS classiques.

Pour appliquer plusieurs pseudo-éléments avec un contenu différent à un élément, créez des règles CSS supplémentaires à l'aide de sélecteurs combinés. Par exemple, vous pouvez utiliser .circle.now:before ou .now.circle:before pour cibler l'élément et spécifier le contenu souhaité pour chaque pseudo-élément.

Les spécifications CSS héritées proposaient une syntaxe pour insérer plusieurs : :before et ::after pseudo-éléments avec une cascade compatible CSS2.1. Cependant, cette fonctionnalité n'a pas été implémentée et il est peu probable qu'elle soit incluse dans les futures spécifications.

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!