So verwenden Sie Pseudoklassen und Pseudoelemente in CSS
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Warum scheitern Pseudoelemente?
Nov 21, 2023 pm 05:13 PM
Gründe für Pseudoelementfehler: 1. Selektorprobleme; 3. Vererbungsprobleme; 5. Probleme mit der Browserkompatibilität; Detaillierte Einführung: 1. Selektorproblem: Der Selektor des Pseudoelements ist möglicherweise falsch, was dazu führt, dass das Zielelement nicht ausgewählt werden kann. 2. Stilkonflikt: Wenn in CSS ein Stilkonflikt vorliegt, wird das Pseudoelement möglicherweise ungültig. 3. Vererbungsproblem, Pseudoelemente erben möglicherweise nicht bestimmte Stilattribute; 4. Syntaxfehler im CSS können dazu führen, dass die Pseudoelemente ungültig werden.
Verwenden Sie den Pseudoklassenselektor :nth-child(n+3), um den Stil untergeordneter Elemente auszuwählen, deren Position größer oder gleich 3 ist
Nov 20, 2023 am 11:20 AM
Verwenden Sie den Pseudoklassenselektor :nth-child(n+3), um den Stil untergeordneter Elemente auszuwählen, deren Position größer oder gleich 3 ist. Das spezifische Codebeispiel lautet wie folgt: HTML-Code: <divid="container" ><divclass="item"> ;Erstes untergeordnetes Element</div><divclass="item"&
Implementieren Sie verschiedene Anwendungsszenarien des CSS::placeholder-Pseudoelementselektors
Nov 20, 2023 pm 03:17 PM
Um verschiedene Anwendungsszenarien des CSS::placeholder-Pseudoelementselektors zu implementieren, sind spezifische Codebeispiele erforderlich. In der Webentwicklung ist CSS eine häufig verwendete Stylesheet-Sprache, die zur Steuerung des Layouts und Stils von Webseiten verwendet wird. Der Pseudoelementselektor ::placeholder ist ein neuer Selektor in CSS3, der zum Ändern des Platzhalterstils von Eingabefeldern (einschließlich Texteingabefeldern, Passworteingabefeldern usw.) verwendet wird. Im Folgenden stellen wir verschiedene Anwendungsszenarien vor und stellen entsprechende Codebeispiele bereit. Ändern Sie die Farbe des Eingabefeld-Platzhalters:
CSS-Pseudo-Selektor-Lernen, Pseudoklassen-Selektor-Analyse
Aug 03, 2022 am 11:26 AM
Im vorherigen Artikel „Css-Pseudo-Selektor-Lernen – Pseudo-Element-Selektor-Analyse“ haben wir etwas über Pseudo-Element-Selektoren gelernt, und heute werfen wir einen genaueren Blick auf Pseudo-Klassen-Selektoren. Ich hoffe, dass es für alle hilfreich ist!
Warum Hover ein Pseudoelement ist
Oct 09, 2023 pm 05:45 PM
Hover ist kein Pseudoelement, sondern eine Pseudoklasse. Pseudoklassen werden verwendet, um einen bestimmten Zustand oder ein bestimmtes Verhalten eines Elements auszuwählen, während Pseudoelemente verwendet werden, um bestimmten Teilen eines Elements Stile hinzuzufügen. Da :hover zum Auswählen eines bestimmten Zustands eines Elements verwendet wird, anstatt Stile zu einem bestimmten Teil des Elements hinzuzufügen, können Sie die Pseudoklasse :hover verwenden, um den Mouseover-Status eines Elements zu formatieren, und Sie können :hover verwenden Pseudoklasse zum Hinzufügen von Hover-Effekten zu Links. Die Farbe, Hintergrundfarbe usw. des Links können sich ändern, wenn die Maus darüber fährt.
Entdecken Sie die grundlegenden Konzepte und Verwendungsszenarien von CSS-Pseudoklassen und Pseudoelementen
Dec 23, 2023 pm 01:21 PM
Verstehen Sie die grundlegenden Konzepte und Anwendungsszenarien von CSS-Pseudoklassen und Pseudoelementen. CSS (CascadingStyleSheets) ist eine Auszeichnungssprache, die zur Beschreibung des Stils von Webseiten verwendet wird. Sie kann das Erscheinungsbild und Layout von Elementen in Webseiten steuern. In CSS sind Pseudoklassen und Pseudoelemente sehr nützliche Funktionen, die den Anwendungsbereich und die Flexibilität von CSS weiter erweitern können. 1. Pseudoklassen Pseudoklassen sind Schlüsselwörter, die zur Auswahl bestimmter Zustandselemente verwendet werden. Zu den gängigen Pseudoklassen gehören: Hover, Active, Focus usw. Hier sind einige häufige
Welchen Nutzen hat das Hinzufügen von Pseudoelementen?
Oct 09, 2023 pm 05:45 PM
Pseudoelemente können verwendet werden, um dekorative Effekte zu erzeugen, bestimmte Layouteffekte zu erzielen, interaktive Effekte zu erzeugen, bestimmte Elementzustände zu ändern und einige Spezialeffekte zu erzeugen. Detaillierte Einführung: 1. Erstellen Sie dekorative Effekte. Durch Festlegen der Inhaltsattribute und Stile des Pseudoelements: before oder: after können Sie Symbole, Formen oder andere dekorative Elemente vor oder nach dem Element einfügen, sodass Sie weitere Elemente hinzufügen können 2. Erzielen Sie spezifische Layouteffekte, die durch :before- und :after-Pseudoelemente usw. erzeugt werden können.
Verwenden Sie den Pseudoklassenselektor :active, um CSS-Stile für Mausklickeffekte zu implementieren
Nov 20, 2023 am 09:26 AM
CSS-Stile, die den :active-Pseudoklassenselektor verwenden, um Mausklickeffekte zu erzielen. CSS ist eine kaskadierende Stylesheet-Sprache, die zur Beschreibung der Leistung und des Stils von Webseiten verwendet wird. :active ist ein Pseudoklassenselektor in CSS, der verwendet wird, um den Zustand eines Elements auszuwählen, wenn mit der Maus geklickt wird. Mithilfe des Pseudoklassenselektors :active können wir dem angeklickten Element bestimmte Stile hinzufügen, um den Mausklickeffekt zu erzielen. Im Folgenden finden Sie einen einfachen Beispielcode, der zeigt, wie Sie mit dem Pseudoklassenselektor :active einen Mausklickeffekt erzielen.
