Können Sie mehrere :before-Pseudoelemente auf ein einzelnes Element anwenden?

Können mehrere :before-Pseudoelemente dasselbe Element verbessern?

Einführung:
Bei der Verwendung von CSS stellt sich häufig die Frage: Können mehrere :before-Pseudoelemente auf ein einzelnes Element angewendet werden? Um die Antwort zu verstehen, wollen wir uns mit dem Konzept der Pseudoelemente befassen und untersuchen, wie sie mit der Kaskade interagieren.

CSS-Pseudoelemente und die Kaskade:
In CSS2.1 , kann ein Element jeweils nur ein Pseudoelement eines bestimmten Typs besitzen, z. B. :before oder :after. Dies bedeutet, dass ein Element beide, aber nicht mehrere Instanzen desselben Typs haben kann.

Beispiel für die Verwendung von jQuery:
Wie im angegebenen Code veranschaulicht, wird versucht, mehrere :before Pseudo-Elemente anzuwenden -Elements zu einem Element mit jQuery führen dazu, dass nur das letzte wirksam wird:

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

Kaskadierung Verhalten:
Wenn mehrere :before-Regeln auf dasselbe Element angewendet werden, folgen sie den kaskadierenden Regeln, wobei die Regel mit der höheren Priorität (die letzte) die anderen überschreibt. Dies führt zu einem einzelnen :before-Pseudoelement mit den Deklarationen nur aus der letzten Regel, wie im Folgenden:

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

Überwindung der Einschränkung:
Wenn mehrere :before Sind Deklarationen für dasselbe Element gewünscht, müssen zusätzliche CSS-Regeln mit kombinierten Selektoren erstellt werden. Dies ermöglicht die Angabe des gewünschten Verhaltens für verschiedene Klassenkombinationen:

.circle.now:before { /* Specific rule for .circle with .now */ }
.now.circle:before { /* Specific rule for .now with .circle */ }

Legacy-CSS und zukünftige Entwicklungen:
Die veraltete CSS3-Inhaltsspezifikation schlug das Einfügen mehrerer Pseudoelemente mithilfe von a vor Notation kompatibel mit der CSS2.1-Kaskade. Diese Funktion wurde jedoch nie implementiert. Derzeit wird diese Funktion in den Entwürfen von css-content-3 und css-pseudo-4 aufgrund mangelnden Interesses weggelassen.

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