Heim > Artikel > Web-Frontend > 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)

不言Original: 2018-11-02 10:08:083250Durchsuche

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 e8e496c15ba93d81f6ea4fe5f55a2244-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!

JavaScript css css3 html 标识符 dom 选择器伪类伪元素

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was sind CSS-Pseudoklassen? Detaillierte Einführung in CSS-PseudoklassenNächster Artikel：Was sind CSS-Pseudoklassen? Detaillierte Einführung in CSS-Pseudoklassen

In Verbindung stehende Artikel

Mehr sehen