Können mehrere :before-Pseudoelemente auf dasselbe Element angewendet werden?

Mehrere :before-Pseudoelemente für dasselbe Element

Können mehrere :before-Pseudoelemente auf dasselbe HTML-Element angewendet werden?

Stellen Sie sich das folgende Szenario vor:

<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.

In CSS2.1 kann ein Element zu einem bestimmten Zeitpunkt nur ein Pseudoelement jedes Typs besitzen. Wenn also mehrere :before-Regeln auf dasselbe Element abzielen, werden sie kaskadiert, um ein einzelnes :before-Pseudoelement zu bilden. Im bereitgestellten Beispiel sieht das Ergebnis wie folgt aus:

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

Die zuletzt deklarierte Inhaltsdeklaration hat Vorrang, während andere Deklarationen verworfen werden. Dieses Verhalten ähnelt dem von regulären CSS-Eigenschaften.

Um mehrere Pseudoelemente mit unterschiedlichem Inhalt auf ein Element anzuwenden, erstellen Sie zusätzliche CSS-Regeln mithilfe kombinierter Selektoren. Sie könnten beispielsweise .circle.now:before oder .now.circle:before verwenden, um auf das Element abzuzielen und den gewünschten Inhalt für jedes Pseudoelement anzugeben.

Alte CSS-Spezifikationen schlugen eine Syntax zum Einfügen mehrerer vor: :before und ::after Pseudoelemente mit einer CSS2.1-kompatiblen Kaskade. Diese Funktion wurde jedoch nicht implementiert und wird wahrscheinlich nicht in zukünftige Spezifikationen aufgenommen.

Das obige ist der detaillierte Inhalt vonKönnen mehrere :before-Pseudoelemente auf dasselbe Element angewendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!