So ändern Sie den Stil von CSS-Pseudoelementen

Dieser Artikel stellt vor, wie man den CSS-Pseudoelementstil ändert. Ich hoffe, dass er Freunden, die Front-End-CSS lernen, hilfreich sein wird!

1. CSS-Pseudoelemente

CSS-Pseudoelemente werden zum Festlegen spezieller Selektoreffekte verwendet . Die Verwendung des Pseudoelements

ist wie folgt:

selector:pseudo-element {property:value;}

Die CSS-Klasse kann auch mit dem Pseudoelement

selector.class:pseudo-element {property:value;}

verwendet werden. 2. Ändern Sie den Pseudostil -element

(Empfohlenes Lernen: CSS-Tutorial)

1. Problembeschreibung

Pseudoelementbeispiel:

.content {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background: black;
}
.content::before {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    background: blue;
}

Wenn wir das Pseudoelement ändern möchten, wie geht das? Da Pseudoelemente einige abstrakte Elemente im DOM-Baum erstellen, diese abstrakten Elemente jedoch nicht in der Dokumentsprache oder im HTML-Quellcode vorhanden sind, können diese Pseudoelemente nicht über Selektoren ausgewählt werden. Da Pseudoelemente nicht ausgewählt werden können, wie kann ich den Stil von Pseudoelementen ändern?

2. Lösung 1

Definieren Sie das Pseudoelement neu, indem Sie ein Stil-Tag hinzufügen, um den Pseudoelement-Stil zu überschreiben

$(".content").append("<style>.content::before{display:none}</style>");

Bei dieser Lösung gibt es jedoch ein Problem, da der ursprüngliche Stil überschrieben wird und alle Tags dieses Typs betroffen sind.

3. Lösung 2

Eine bessere Lösung besteht darin, einige Stile von Pseudoelementen durch Hinzufügen neuer CSS-Klassen zu ändern:

1) Definieren Sie eine neue CSS-Klasse.

Fügen Sie beispielsweise eine neue CSS-Klasse hinzu:

.change::before {
    background: red;
}

2) Fügen Sie eine neue Klasse hinzu, um den Pseudoelementstil zu ändern.

Verwenden Sie den ID-Selektor und den CSS-Selektor in JQuery und verwenden Sie dann addClass() zum Hinzufügen und Ändern. Das Beispiel lautet wie folgt:

$("#content1").addClass("change");

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Stil von CSS-Pseudoelementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!