In CSS2.1 kann ein Element zu jeder Zeit höchstens eines Pseudoelements enthalten. (Dies bedeutet, dass ein Element sowohl ein :before
als auch ein :after
Pseudoelement haben kann - es kann einfach nicht mehr als eines von jeder Art haben.)
Wenn Sie mehrere :before
Regeln haben, die mit demselben Element übereinstimmen, werden alle :before
wie bei einem normalen Element kaskadiert und auf ein einzelnes Pseudoelement angewendet. In Ihrem Beispiel sieht das Endergebnis folgendermaßen aus:
.circle.now:before {
content: "Now";
font-size: 19px;
color: black;
}
Wie Sie sehen, wird nur die content
Deklaration mit der höchsten Priorität (wie bereits erwähnt, die letzte) wirksam. Der Rest der Deklarationen wird verworfen, wie dies bei jeder anderen CSS-Eigenschaft der Fall ist.
Dieses Verhalten wird im Abschnitt Selektoren von CSS2.1 beschrieben :
Pseudoelemente verhalten sich wie echte Elemente in CSS, mit den unten und anderswo beschriebenen Ausnahmen .
Dies impliziert, dass Selektoren mit Pseudoelementen genauso funktionieren wie Selektoren für normale Elemente. Dies bedeutet auch, dass die Kaskade auf die gleiche Weise funktionieren sollte. Seltsamerweise scheint CSS2.1 die einzige Referenz zu sein. Weder CSS3-Selektoren noch CSS3-Kaskade erwähnen dies überhaupt, und es bleibt abzuwarten, ob dies in einer zukünftigen Spezifikation geklärt wird.
Wenn ein Element mehr als einem Selektor mit demselben Pseudoelement entsprechen kann und Sie möchten, dass alle Elemente irgendwie angewendet werden, müssen Sie zusätzliche CSS-Regeln mit kombinierten Selektoren erstellen, damit Sie genau angeben können, was der Browser in diesen Selektoren tun soll Fälle. Ich kann hier kein vollständiges Beispiel einschließlich der content
Eigenschaft angeben, da beispielsweise nicht klar ist, ob das Symbol oder der Text an erster Stelle stehen soll. Der Selektor, den Sie für diese kombinierte Regel benötigen, ist entweder .circle.now:before
oder .now.circle:before
- je nachdem, welchen Selektor Sie auswählen, ist dies eine persönliche Präferenz, da beide Selektoren gleichwertig sind. Es ist nur der Wert der content
Eigenschaft, den Sie selbst definieren müssen.
Wenn Sie noch ein konkretes Beispiel benötigen, lesen Sie meine Antwort auf diese ähnliche Frage .
Das Erbe css3-Inhalt - Spezifikation enthält einen Abschnitt zum Einfügen von mehrere ::before
und ::after
pseudo-Elementen einer Notation , die mit der CSS2.1 Kaskade kompatibel ist, aber beachten Sie, dass dieses bestimmte Dokument ist veraltet - es wird nicht seit 2003 aktualisiert, und niemand hat hat diese Funktion im letzten Jahrzehnt implementiert. Die gute Nachricht ist, dass das verlassene Dokument unter dem Deckmantel von CSS-Content-3 und CSS-Pseudo-4 aktiv umgeschrieben wird . Die schlechte Nachricht ist, dass das Merkmal mit mehreren Pseudoelementen in keiner der beiden Spezifikationen zu finden ist, was vermutlich wiederum auf das mangelnde Interesse des Implementierers zurückzuführen ist.
circle
als auch zur Klasse gehörtnow
, gelten beide Regeln für das Pseudoelement des:before
Elements. Normales CSS impliziert jedoch, dass nur eine dercontent
Einstellungen wirksam werden kann (durch normale Kaskadenregeln). Der Punkt ist, dasscontent
sich nicht ansammelt.::before
noch::after
Pseudoelemente zulässt .Wenn Ihr Hauptelement einige untergeordnete Elemente oder Texte enthält, können Sie diese verwenden.
Positionieren Sie Ihr Hauptelement relativ (oder absolut / fest) und verwenden Sie beide: vor und: nach absolut positioniert (in meiner Situation musste es absolut sein, ich weiß nichts über Ihr Element).
Wenn Sie nun ein weiteres Pseudoelement möchten, hängen Sie ein Absolut: Vorher an eines der untergeordneten Elemente des Hauptelements an (wenn Sie nur Text haben, setzen Sie ihn in einen Bereich, jetzt haben Sie ein Element), das nicht relativ / absolut / fest ist .
Dieses Element verhält sich so, als wäre sein Besitzer Ihr Hauptelement.
HTML
CSS
quelle
.modal:first-child:before { …
Ich habe dies behoben mit:
Verwenden Sie die Schriftfamilie "font awesome 5 free" für das Symbol. Anschließend müssen Sie die Schriftart angeben, die wir erneut verwenden. Wenn wir dies nicht tun, verwendet der Navigator die Standardschriftart (mal neue römische Schrift oder ähnliches) Dies).
quelle