Detaillierte Einführung in Pseudoklassen und Pseudoelemente in CSS (Codebeispiele)

Der Inhalt dieses Artikels ist eine detaillierte Einführung (Codebeispiel) über Pseudoklassen und Pseudoelemente. Ich hoffe, dass er einen gewissen Referenzwert hat wird dir helfen.

1. Pseudoklassen

Pseudoklassen umfassen zwei Typen: Staatspseudoklasse (UI-Pseudoklasse) und strukturelle Pseudoklasse.

(1) Die Status-Pseudoklasse wird basierend auf dem aktuellen Status des Elements ausgewählt.

Der Zustand eines Elements ändert sich dynamisch während der Interaktion mit dem Benutzer, sodass das Element je nach Zustand unterschiedliche Stile präsentiert. Dieser Stil wird angezeigt, wenn sich das Element in einem bestimmten Zustand befindet, und geht verloren, wenn es in einen anderen Zustand übergeht.

Übliche Status-Pseudoklassen umfassen hauptsächlich:

:link gilt für Links, die nicht besucht wurden;
:hover gilt für Elemente, über die sich die Maus bewegt
: active Gilt für aktivierte Elemente;
:visited gilt für besuchte Links, schließt sich gegenseitig mit :link aus.
:focus gilt für Elemente, die den Tastatureingabefokus haben.
:target gilt für das Element, auf das nach dem Klicken auf den Link verwiesen wird. Die erwarteten Ergebnisse werden angezeigt. Um es leichter zu merken, stellen Sie es sich so vor: „

LoVe? HA!

“ Der Großbuchstabe ist der erste Buchstabe jeder Pseudoklasse.

input:focus {border:1px solid blue;}

fügt dem Eingabefeld einen blauen Rahmen hinzu, wenn sich der Cursor im Feld befindet. Dadurch kann der Benutzer eindeutig wissen, wo die eingegebenen Zeichen erscheinen werden.

<a href="#more_info">More Information</a>
<h2 id="more_info">This is the information you are looking for.</h2> 
#more_info:target {background:#eee;}

fügt dem Element mit der ID more_info einen hellgrauen Hintergrund hinzu, wenn der Benutzer auf den Link klickt, um zum Element weitergeleitet zu werden.

(2) Strukturelle Pseudoklasse ist ein neuer Selektor in CSS3

Verwenden Sie den DOM-Baum, um Elemente zu filtern und Elemente über die gegenseitige Beziehung der Dokumentstruktur abzugleichen, was die Definition von reduzieren kann Klassen- und ID-Attribute, wodurch die Dokumentstruktur prägnanter wird.

Übliche Beispiele sind:

:first-child wählt das erste untergeordnete Element eines Elements aus;

:last-child wählt das letzte untergeordnete Element eines Elements aus;

:nth -child() wählt ein oder mehrere spezifische untergeordnete Elemente eines Elements

aus; nth-last-child() wählt ein oder mehrere spezifische untergeordnete Elemente eines Elements aus, beginnend mit dem letzten untergeordneten Element; :nth-of-type() wählt das angegebene Element aus;

:nth-last-of-type() wählt das angegebene Element aus und beginnt mit dem Zählen ab dem letzten Element;
:first-of-type wählt das erste aus untergeordnetes Element desselben Typs unter einem übergeordneten Element;
:last-of-type wählt das letzte untergeordnete Element desselben Typs unter einem übergeordneten Element aus;
:only-child selects Das Element ist das einzige untergeordnete Element von sein übergeordnetes Element;
:only-of-type wählt ein Element aus, das das einzige untergeordnete Element desselben Typs wie sein übergeordnetes Element ist;
:empty wählt ein Element aus, das keinen Inhalt hat.


2. Pseudoelemente

Pseudoelemente wirken sich auf bestimmte Inhalte im Element aus, anstatt den Zustand zu beschreiben. Seine Operationsebene ist eine Ebene tiefer als die von Pseudoklassen, daher ist seine Dynamik viel geringer als die von Pseudoklassen. Tatsächlich handelt es sich bei Pseudoelementen um Dinge, die normale Selektoren vor oder nach bestimmten Elementen nicht ausführen können. Der Inhalt des Steuerelements ist derselbe wie das Element, es handelt sich jedoch um eine Abstraktion, die auf dem Element selbst basiert und nicht in der Dokumentstruktur vorhanden ist!

Zu den gängigen Pseudoelementselektoren gehören:

:first-letter wählt den ersten Buchstaben (Buchstabe) des Elementtexts aus.

:first-line wählt die erste Zeile des Elementtexts aus.

:before fügt neuen Inhalt am Anfang des Elementinhalts hinzu.

:after fügt neuen Inhalt am Ende des Elementinhalts hinzu.

3. Hinweis

Ein einzelner Doppelpunkt (:) wird für CSS3-Pseudoklassen und ein doppelter Doppelpunkt (::) für CSS3-Pseudoelemente verwendet Um mit einigen Browsern kompatibel zu sein, werden im Allgemeinen einzelne Doppelpunkte

verwendet. Kompatibilitätsprobleme werden Postcss überlassen. In diesem Artikel werden keine Kompatibilitätsschreibmethoden behandelt, einschließlich Präfixproblemen, die dem Autoprefixer überlassen werden können. (Ich verstehe nicht, was dieser Satz bedeutet. Schauen wir uns ihn später an)

Der Effekt einer Pseudoklasse (strukturelle Pseudoklasse) kann durch Hinzufügen einer tatsächlichen Klasse erreicht werden, während der Effekt von Pseudoelemente müssen durch Hinzufügen eines tatsächlichen Elements erreicht werden, weshalb eines von ihnen als Pseudoklasse und das andere als Pseudoelement bezeichnet wird.

4. Verwendung von Pseudoelementen

(1) Floating löschen

.clear:after {
content: '';
display: block;
clear: both;
}

(2) Trennlinie zeichnen

<style>
* {
  padding: 0;
  margin: 0;
}
.spliter::before, .spliter::after {
  content: '';
  display: inline-block;
  border-top: 1px solid black;
  width: 200px;
  margin: 5px;
}
  </style></head><body>
  <p class="spliter">分割线</p></body>

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in Pseudoklassen und Pseudoelemente in CSS (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!