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

Multiple :before Pseudoelemente: Eine Übersicht über Einschränkungen

Frage:

Kann mehrfach sein :before-Pseudoelemente auf ein einzelnes HTML-Element angewendet werden?

Antwort:

Leider ist es nicht möglich, mehrere :before-Pseudoelemente für dasselbe zu haben Element in CSS2.1. Ein Element kann jeweils nur ein Pseudoelement beliebiger Art haben, einschließlich :before und :after.

Erklärung:

Wenn mehrere :before-Regeln gelten auf dasselbe Element, kaskadieren sie und verschmelzen zu einem einzigen :before-Pseudoelement. Nur die oberste Regel mit der höchsten Priorität wird in ihren Deklarationen angewendet. Dies steht im Einklang mit der Funktionsweise der Kaskade für reguläre CSS-Eigenschaften.

Daher gilt in Ihrem Beispiel:

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

Nur ​​die zweite Regel wird angewendet und die Ausgabe lautet:

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

Alternative Ansätze:

Um diese Einschränkung zu überwinden, können Sie entweder:

• Mehrere Regeln in einem einzigen Selektor kombinieren, z .circle.now:before, wodurch beide Regeln auf das Element angewendet würden.
• Verwenden Sie einen CSS-Präprozessor wie Sass oder Less, der es Ihnen ermöglicht, Selektoren zu verschachteln und mehrere :before-Pseudoelemente für dasselbe Element zu erstellen.

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