Heim >Web-Frontend >CSS-Tutorial >Der Unterschied zwischen Pseudoklassen und Pseudoelementen in CSS
Der Unterschied zwischen Pseudoklassen und Pseudoelementen in CSS
- PHPznach vorne
- 2023-08-27 09:33:021035Durchsuche
Pseudoklasse
Pseudoklasse stellt den Status des Selektors dar, z. B.:hover,:aktiv,:last-child usw. Sie beginnen mit einem Doppelpunkt (:). Die Syntax der
CSS-Pseudoklasse lautet wie folgt:
:pseudo-class{
attribute: /*value*/
}Pseudoelement
In ähnlicher Weise werden Pseudoelemente zur Auswahl virtueller Elemente verwendet, z. B. ::after, ::before, ::first-line usw .
Diese beginnen mit einem Doppelpunkt (::).
Die Syntax des CSS-Pseudoelements lautet wie folgt:
::pseudo-element{
attribute: /*value*/
}Beispiel
Das folgende Beispiel veranschaulicht die Eigenschaften von CSS-Pseudoklassen und Pseudoelementen.
Live-Demonstration
<!DOCTYPE html>
<html>
<head>
<style>
a:hover{
padding: 3%;
font-size:1.4em;
color: tomato;
background: bisque;
}
</style>
</head>
<body>
<p>You're somebody else</p>
<a href=#>Dummy link 1</a>
<a href=#>Dummy link 2</a>
</body>
</html>Ausgabe
Dies führt zu den folgenden Ergebnissen:
Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen Pseudoklassen und Pseudoelementen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!