Können Sie mehrere :before-Pseudoelemente auf einem Element haben?

Mehrfache :before-Pseudoelemente

Kann ein Element mehrere :before-Pseudoelemente besitzen? Diese Frage stellt sich, wenn Stile mit jQuery auf dasselbe Element angewendet werden, wobei nur der neueste Stil wirksam zu sein scheint.

CSS2.1-Einschränkungen

In CSS2.1 Ein Element kann zu einem bestimmten Zeitpunkt nur ein Pseudoelement eines bestimmten Typs haben. Somit kann ein Element sowohl :before- als auch :after-Pseudoelemente haben, jedoch nicht mehr als jeweils eines.

Kaskadenverhalten

Mehrere :before-Regeln für die gleiche Elemente werden kaskadiert und auf ein einzelnes :before-Pseudoelement angewendet. Die Regel mit der höchsten Priorität, typischerweise die letzte, hat Vorrang. Im bereitgestellten Beispiel:

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

Nur ​​die Inhaltsdeklaration in der letzten Regel „Jetzt“ wird angewendet. Die übrigen Deklarationen werden verworfen, ähnlich wie bei normalen Elementeigenschaften.

Kombinieren von Selektoren

Wenn mehrere Selektoren mit demselben Element übereinstimmen und Sie alle ihre Stile anwenden möchten, generieren Sie zusätzliche CSS-Regeln mit kombinierten Selektoren. Für das gegebene Beispiel wäre dies .circle.now:before oder .now.circle:before.

Legacy CSS3-Content Specification

Der veraltete CSS3-Content Die Spezifikation schlägt eine Notation zum Einfügen mehrerer ::before- und ::after-Pseudoelemente vor, die mit der CSS2.1-Kaskade kompatibel sind. Diese Funktion ist jedoch veraltet und wurde von keinem Browser implementiert.

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