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;
}

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!