Heim > Artikel > Web-Frontend > So verwenden Sie Pseudoklassen und Pseudoelemente in CSS
So verwenden Sie Pseudoklassen und Pseudoelemente in CSS
- 清浅Original
- 2018-11-21 10:31:292873Durchsuche
Die Pseudoklasse kann über Methoden wie Link und Hover Spezialeffekte zum Selektor hinzufügen. Das Pseudoelement verwendet: first-line, um den ersten Zeilenstil hinzuzufügen, und :first-letter Fügen Sie den Anfangsbuchstaben hinzu. Dies wird unten ausführlich beschrieben. Beide
Pseudoklasse
Es ist eine Möglichkeit zur Auswahl Bestimmte Teile eines HTML-Dokuments, die im Laufe der Zeit den dynamischen Zustand von Elementen beim Betreten oder Verlassen durch Benutzereingriffe darstellen, gehören im Prinzip nicht zum HTML-Dokumentbaum selbst und seinen Elementen oder Attributen. Tatsächlich werden CSS-Pseudoklassen verwendet Um einige Spezialeffekte von Selektoren hinzuzufügen, und Pseudo- Verschiedene Elemente, Pseudoklassen können überall in der Selektorkette erscheinen.
Beispiel
a: Link stellt einen nicht besuchten Link dar
<style>
a:link{
background-color: pink;
}
a: „visit“ stellt den besuchten Link dar
a:visited{
background-color: pink;
}
a: Bewegen Sie den Mauszeiger auf „Beim Verknüpfen“
a:hover{
background-color: pink;
}
a:hover muss sich nach a:link und a:visited befinden, damit es wirksam wird!
a: aktiv: zeigt den ausgewählten Link an
a:hover{
background-color: pink;
}
a:active{
background-color: pink;
}
Beachten Sie, dass aktiv nach dem Schweben verwendet werden muss, um wirksam zu werden
Pseudoelement
Pseudoelement wird verwendet, um Spezialeffekte auf bestimmte Selektoren festzulegen und kann nur auf externer Ebene und auf Dokumentebene angewendet werden Kontexte anstelle von Inline-Stilen. Sie dürfen nur am Ende einer Selektorkette erscheinen und jeder Selektor kann nur ein Pseudoelement angeben. Um mehrere Pseudoelemente in einer einzelnen Elementstruktur zu verarbeiten, müssen Sie mehrere Stilselektoren oder Deklarationsanweisungen erstellen.
: Pseudoelement der ersten Zeile
wird verwendet, um einen speziellen Stil für die erste Textzeile festzulegen. Es kann nur für Elemente auf Blockebene verwendet werden.
Die folgenden Attribute Schriftart, Farbe, Hintergrund, Wortabstand, Buchstabenabstand usw.
p:first-line
{
color: pink;
font-variant: small-caps;/*改为大写*/
}
</style>
</head>
<body>
<p>
you are very good!
</p>gelten für das erste Zeile
: Pseudoelement für den ersten Buchstaben
wird verwendet, um spezielle Stile für den ersten Buchstaben des Textes festzulegen:
kann Schriftart, Farbe, Hintergrund, Rand, Abstand, Rand und andere Attribute ändern
p:first-letter
{
color: pink;
font-variant: small-caps;/*改为大写*/
}
</style>
</head>
<body>
<p>
you are very good!Nur für Anfangsbuchstaben
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für Sie nützlich sein. Das Lernen aller hilft.
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Pseudoklassen und Pseudoelemente in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!