Der Unterschied zwischen Pseudoklassen und Pseudoelementen
(1) Klasse, benutzerdefinierter Klassenname, z. B. div.div0. Wählen Sie das div-Element mit der Klasse div0 aus.
(2) Pseudoklasse, die zum Hinzufügen von Spezialeffekten zu bestimmten Selektoren verwendet wird. Mit Pseudoklassen definierte Stile wirken sich nicht auf die Markierung aus, sondern auf den Status der Markierung, z. B. :hover für das a-Tag und :disabled für das Formularelement.
(3) Elemente wie div, p, h1 usw. sind reale Elemente.
(4) Pseudoelemente sind Elemente, die in HTML nicht existieren und nur zum Rendern in CSS verwendet werden. Pseudoelemente erstellen einen virtuellen Container. Dieser Container enthält keine DOM-Elemente, kann aber Inhalte enthalten. Wie zum Beispiel ::before, ::after.
Pseudo-Klassenselektor
Der Zweck von Pseudoklassen besteht darin, mithilfe von Selektoren Informationen zu finden, die im DOM-Baum nicht vorhanden sind und die mit regulären CSS-Selektoren nicht abgerufen werden können. Pseudoklassen repräsentieren normalerweise einen „Zustand“. Eine Pseudoklasse beginnt mit einem Doppelpunkt, gefolgt vom Namen der Pseudoklasse und optionalen Parametern in Klammern.
Anker-Pseudoklasse
Wenn Sie die vier Zustände eines Tags festlegen, muss die Reihenfolge LVHA sein, also: Link, :visited, :hover, :active.
Unter normalen Umständen müssen Sie nur den Standardeffekt des a-Tags und den Effekt der Mauskreuzung, a{}, a:hover{}, festlegen.
Ziel-Pseudoklassenselektor
:target Zielstil nach Hyperlink Bei Verwendung eines Hyperlinks kann das Ziel des Links mit dem Zielselektor festgelegt werden. Der entsprechende Stil wird erst angezeigt, nachdem das Ziel übersprungen wurde.
Der Wert des href-Attributs des a-Tags kann auf die Linkadresse, die ID des Tags oder den Namen des a-Tags verweisen.
<style>:target{font-size:20pt;border:1pxsolidgray;}div:target{background-color:#ccc;}</style><p><ahref=#news1>Schaltfläche 1</a></ p><p><ahref=#news2>Button 2</a></p><aname=news1>Inhalt 1</a><divid=news2>Inhalt 2</div>Wenn Sie auf die Schaltfläche 2 klicken, wird das Ergebnis angezeigt:
Pseudoklassenselektor für Formularelemente
:in-range funktioniert nur bei Elementen, die Intervallwerte angeben können, wie z. B. die Min- und Max-Attribute im Eingabeelement;
:invalid funktioniert nur bei Elementen, die Intervallwerte angeben können, wie z. B. die Min- und Max-Attribute im |input-Element, das richtige E-Mail-Feld, zulässige numerische Felder usw.
Struktureller Pseudoklassenselektor
<style>p:first-child{color:red;}/*Das erste Element ist h1, daher ist es nicht ausgewählt*/p:first-of-type{color:blue;}p:nth-child(4) { color:green;}/*Das vierte Element ist span, daher ist es nicht ausgewählt*/p:nth-of-type(4){color:pink;}p:only-child{color:yellow;}/* Es ist das 7. P ausgewählt, aber der Stil wird überschrieben*/p:only-of-type{color:orange;}/*Das 7. und 8. P sind ausgewählt*/</style><h1>Titel 1</ h1 ><p>Das erste p</p><p>Das zweite p</p><span>Textinhalt</span><p>Das dritte p</p><p>Das vierte p</p> <p><i>Textinhalt</i>Das fünfte S.</p><p>Das sechste S.</p><h5>Titel 5</h5><div><p >Das siebte S.</p ></div><div><p>Das achte p</p><span>Textinhalt</span></div><div><p>Das neunte p </p><p>Das zehnte p </p></div>Laufergebnisse:
Pseudoklassenselektoren negieren
Pseudoelement
Pseudoelemente erstellen einige abstrakte Elemente im DOM-Baum. Diese abstrakten Elemente existieren nicht in der Dokumentsprache (können als HTML-Quellcode verstanden werden). Beispiel: Die Dokumentschnittstelle bietet keinen Mechanismus für den Zugriff auf das erste Wort oder die erste Zeile des Elementinhalts, aber Pseudoelemente ermöglichen es Entwicklern, diese Informationen zu extrahieren. Darüber hinaus ermöglichen einige Pseudoelemente Entwicklern, Inhalte abzurufen, die im Quelldokument nicht vorhanden sind. Ein Pseudoelement beginnt mit zwei Doppelpunkten::, gefolgt vom Namen des Pseudoelements.
Einfach ausgedrückt erstellen Pseudoelemente einen virtuellen Container, der keine DOM-Elemente enthält, aber Inhalte enthalten kann.
Im Pseudoelement-Selektor in CSS3 und im Pseudoklassen-Selektor in CSS2 sind Vorher und Nachher genau gleich.
Es gibt nur die folgenden Pseudoelemente:
Das Inhaltsattribut wird mit den Pseudoelementen :before und :after verwendet, um generierten Inhalt einzufügen. Sie können Pseudoklassen + Pseudoelemente verwenden.
Gewichtung im CSS-Stil
CSS-Prioritätsregeln:
(1) Wenn die Gewichtungswerte der CSS-Auswahlregeln unterschiedlich sind, hat derjenige mit dem höheren Gewichtungswert Vorrang;
(2) Wenn die Gewichtswerte der CSS-Auswahlregeln gleich sind, hat die später definierte Regel Vorrang.
(3) Wenn !importand nach dem CSS-Attribut hinzugefügt wird, wird bedingungslose absolute Priorität gewährt;
Berechnung des Gewichtswertes: