Web-Frontend
CSS-Tutorial
Was sind CSS-Pseudoklassen? Eine kurze Einführung in CSS-Pseudoklassen (mit Beispielen)
Was sind CSS-Pseudoklassen? Eine kurze Einführung in CSS-Pseudoklassen (mit Beispielen)
Eine CSS-Pseudoklasse, die es Ihnen ermöglicht, einem Element einen bestimmten Zustand zuzuweisen. Beispielsweise bewegt ein Benutzer den Mauszeiger über ein Bild auf einer Webseite und es wechselt zu einem anderen Bild. Links ändern nach dem Besuch ihre Farbe und können von nicht besuchten Links unterschieden werden. Eingabefelder im Formular sind deaktiviert und haben keine Werte. Pseudoklassen können diese und weitere Operationen implementieren. Gewöhnliche CSS-Klassen können auch mit Pseudoklassen verwendet werden.
CSS3 fügt mehr Pseudoklassen hinzu als zuvor in CSS2 verfügbar. (Empfohlener Kurs: CSS3-Video-Tutorial) Die
-Pseudoklasse wird dem Selektor hinzugefügt. Ihr geht ein Doppelpunkt voran, gefolgt von einem Attribut mit einem Wert in Klammern. Die Syntax einer Pseudoklasse lautet wie folgt:
selector: pseudo-class { property:value;}Grundlegende Pseudoklassen
Es gibt viele verschiedene Pseudoklassen, und das folgende Codebeispiel zeigt einige davon Die grundlegendsten Pseudoklassen. Diese werden als dynamische Pseudoklassen klassifiziert, die sich aufgrund von Benutzeraktionen ändern. Im Codebeispiel wird die Pseudoklasse :link verwendet, um die Farbe des Links auf Blau zu setzen. Sobald der Benutzer den Link besucht, wird die Pseudoklasse :visited verwendet, um die Farbe des Links in Kastanienbraun zu ändern. Auch demonstriert: Wenn der Benutzer mit der Maus über das Bild fährt, wird der Hover verwendet, um einen violetten Kreis mit weißem Text in ein rosa Quadrat mit gelbem Text zu ändern. Die Pseudoklasse:Focus ändert das Datumseingabefeld in Grau, wenn der Benutzer darauf klickt oder darauf „fokussiert“. Codebeispiel hier Probieren Sie es selbst aus!
<!DOCTYPE html>
<html>
<head>
<style>
a:link{
color:blue;
}
a:visited{
color:maroon;
}
div {
background-color: purple;
color: white;
line-height:90px;
font-size:20px;
text-align:center;
width:200px;
height:200px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
div:hover {
background-color:pink;
color:yellow;
width:200px;
height:200px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
input:focus {
background-color: lightgray;
}
</style>
</head>
<body>
<p><b><a href="https://www.php.cn/" target="_blank">Click on this link!</a></b></p>
<div>Hover over this</div>
<p><b>Enter todays date in the field below</b></p>
<form>
Date: <input type="text" name="Date"><br>
</form>
</body>
</html>Einige weitere Pseudoklassen
Einige der am häufigsten verwendeten Pseudoklassen sind unten aufgeführt. Eine vollständige Liste aller Pseudoklassen finden Sie hier.
: erstes Kind – Mit dieser Klasse können Sie bestimmte Stile zu einem Element hinzufügen, das das erste untergeordnete Element seines übergeordneten Elements ist.
:root- Diese Pseudoklasse wird verwendet, um das Stammelement des Dokuments abzugleichen.
: lang- Verschiedene Sprachen haben unterschiedliche Regeln und Konventionen. Manchmal müssen Sie Seiten erstellen, die in mehreren Sprachen verfügbar sind. Die Pseudoklasse :lang ist in dieser Situation nützlich. Dabei werden hauptsächlich die lang=""-HTML-Attribute und -Elemente untersucht und die Elemente entsprechend abgeglichen.
: deaktiviert – Damit können Sie deaktivierte Eingabeelemente wie Textfelder und Schaltflächen kennzeichnen.
: fullscreen – Diese Pseudoklasse verwendet ein Element im Vollbildmodus.
Pseudoelemente
Pseudoelemente haben eine ähnliche Funktionalität wie Pseudoklassen, da sie per CSS gestaltet und von Benutzeragenten hinzugefügt werden können. Sie unterscheiden sich jedoch von Pseudoklassen darin, dass Sie Elemente verwenden können, die im DOM nicht vorhanden sind. Der Syntaxbezeichner für ein Pseudoelement ist normalerweise ein Doppelpunkt und nicht ein einzelner Doppelpunkt wie bei Pseudoklassen. Gängige Pseudoelemente sind ::before, ::after und ::first-line. Es ist wichtig zu beachten, dass einige Programmierer einen einzelnen Doppelpunkt verwenden: Für Pseudoelemente ist dies eine Konvention in CSS2. Beachten Sie dies, um Verwechslungen zwischen Pseudoklassen und Pseudoelementen zu vermeiden.
Schließlich ermöglicht die
-Pseudoklasse die Anwendung spezieller Zustände auf Elemente. Sie ermöglichen es Entwicklern, coole Effekte zu erstellen, ohne Skriptsprachen wie JavaScript zu verwenden. Es gibt viele verschiedene Arten von Pseudoklassen, mit denen Sie Ihre Seiten interaktiver und interessanter gestalten und gleichzeitig Ihren Code einfach halten können.
Das obige ist der detaillierte Inhalt vonWas sind CSS-Pseudoklassen? Eine kurze Einführung in CSS-Pseudoklassen (mit Beispielen). 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
1378
52
Arbeiten mit GraphQL Caching
Mar 19, 2025 am 09:36 AM
Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört
Aufbau einer Ethereum -App mit Redwood.js und Fauna
Mar 28, 2025 am 09:18 AM
Mit dem jüngsten Aufstieg von Bitcoins Preis über 20.000 USD und kürzlich von 30.000, dachte ich, es lohnt
Erstellen Sie Ihr eigenes Bragdoc mit ELEITY
Mar 18, 2025 am 11:23 AM
Unabhängig davon, in welcher Phase Sie als Entwickler Sie befinden, haben die Aufgaben, die wir erledigen - ob groß oder klein - einen enormen Einfluss auf unser persönliches und berufliches Wachstum.
Vue 3
Apr 02, 2025 pm 06:32 PM
Es ist aus! Herzlichen Glückwunsch an das Vue -Team, dass es eine massive Anstrengung war und lange kommt. Alle neuen Dokumente auch.
Ein bisschen auf CI/CD
Apr 02, 2025 pm 06:21 PM
Ich sage "Website" passt besser als "Mobile App", aber ich mag dieses Rahmen von Max Lynch:
Können Sie gültige CSS -Eigenschaftswerte aus dem Browser erhalten?
Apr 02, 2025 pm 06:17 PM
Ich ließ jemanden mit dieser sehr legitimen Frage einschreiben. Lea hat gerade darüber gebloggt, wie Sie gültige CSS -Eigenschaften selbst aus dem Browser erhalten können. Das ist so.
Gestapelte Karten mit klebriger Positionierung und einem Schuss Sass
Apr 03, 2025 am 10:30 AM
Neulich habe ich dieses besonders schöne Stück von der Website von Corey Ginnivan entdeckt, auf der eine Sammlung von Karten aufeinander stapelt.
Verwenden wir (x, x, x, x), um über Spezifität zu sprechen
Mar 24, 2025 am 10:37 AM
Ich habe mich neulich mit Eric Meyer unterhalten und erinnerte mich an eine Eric Meyer -Geschichte aus meinen prägenden Jahren. Ich habe einen Blog -Beitrag über CSS -Spezifität geschrieben, und
