Detaillierte Erklärung zur Verwendung struktureller Pseudoklassenselektoren und Pseudoelementselektoren in CSS3

Detaillierte Erklärung zur Verwendung struktureller Pseudoklassenselektoren und Pseudoelementselektoren in CSS3

Erstkindpraxis

Verwenden Sie first-child -Attribut, um die Textfarbe des ersten li Tags im ul Tag auf Rot festzulegen.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Struktureller Pseudoklassenselektor</title>
  <Stil>  
    ul li:erstes-Kind{
      Farbe: rot;
    }
  </Stil>
</Kopf>

<Text>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</body>

</html>

Ergebnisdiagramm

Letztes-Kind-Übung

Verwenden Sie last-child , um die Textfarbe des letzten li -Tags im ul -Tag auf Rot festzulegen.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Struktureller Pseudoklassenselektor</title>
  <Stil>  
    ul li:letztes-Kind{
      Farbe: rot;
    }
  </Stil>
</Kopf>

<Text>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</body>

</html>

Ergebnisdiagramm

n-te-Kind-Praxis

Verwenden Sie nth-child(n) , um die Textfarbe des dritten li -Tags im ul -Tag auf Rot festzulegen.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Struktureller Pseudoklassenselektor</title>
  <Stil>  
    ul li:nth-child(3){
      Farbe: rot;
    }
  </Stil>
</Kopf>

<Text>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</body>

</html>

Ergebnisdiagramm

Verwenden Sie nth-child(even) , um die Textfarbe der geraden li Tags im ul Tag auf Rot zu setzen

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Struktureller Pseudoklassenselektor</title>
  <Stil>  
    ul li:nth-child(gerade){
      Farbe: rot;
    }
  </Stil>
</Kopf>

<Text>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</body>

</html>

Ergebnisdiagramm

Verwenden Sie nth-child(2n+1) , um die Textfarbe der ungeraden li Tags im ul Tag auf Rot zu setzen

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Struktureller Pseudoklassenselektor</title>
  <Stil>  
    ul li:n-tes-Kind(2n+1){
      Farbe: rot;
    }
  </Stil>
</Kopf>

<Text>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</body>

</html>

Ergebnisdiagramm

Einzelkindpraxis

Verwenden Sie only-child -Attribut, um die Textfarbe nur eines li Tags im ul Tag auf Rot festzulegen.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Struktureller Pseudoklassenselektor</title>
  <Stil>  
    ul li:Einzelkind{
      Farbe: rot;
    }
  </Stil>
</Kopf>

<Text>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
   <ul>
     <li>Nur ein Li-Tag</li>
   </ul>
</body>

</html>

Ergebnisdiagramm

Einführung in Pseudoelement-Selektoren

  • Die Hauptfunktion von Pseudoelementen besteht darin, den Text von Elementen zu bearbeiten und Inhalte hinzuzufügen.
  • Pseudoelement-Verwendungstabelle

Einführung in strukturelle Pseudoklassenselektoren

  • Zur Handhabung einiger Spezialeffekte werden strukturelle Pseudoklassenselektoren verwendet.
  • Tabelle mit Beschreibungen der strukturellen Pseudoklassen-Selektoreigenschaften

Eigentum beschreiben
E:erstes Kind Stimmt mit dem ersten untergeordneten Element des E-Elements überein.
E:letztes Kind Passt zum letzten untergeordneten Element des E-Elements.
E:ntes-Kind(n) Passt zum n-ten untergeordneten Element eines Elements namens E.
E:n-te-Kind(2n) oder E:n-te-Kind(gerade) Stimmt mit den geraden untergeordneten Elementen des E-Elements überein.
E:n-te-Kind(2n+1) oder E:n-te-Kind(ungerade) Stimmt mit ungeraden untergeordneten Elementen des E-Elements überein.
E:Einzelkind Stimmt mit genau einem untergeordneten Element eines E-Elements überein.
Eigentum beschreiben
E:Anfangsbuchstabe Legt das erste Wort im E-Element fest.
E:erste Zeile Legt die erste Textzeile im E-Element fest.
E::vor Fügen Sie vor dem E-Element Inhalt hinzu.
E::nach Fügen Sie am Ende des E-Elements Inhalt hinzu.

Übung zum ersten Buchstaben

Verwenden Sie first-letter -Attribut, um die Farbe des ersten Buchstabens des Textes im li Tag im ul Tag auf Rot festzulegen.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Pseudoelement-Selektor</title>
  <Stil>  
    ul li:erster-Buchstabe{
      Farbe: rot;
    }
  </Stil>
</Kopf>

<Text>
   <ul>
     <li>Lächeln ist der erste Glaube</li>
   </ul>
</body>

</html>

Ergebnisdiagramm

Praxis der ersten Wahl

Verwenden Sie first-line -Attribut, um die Farbe der ersten Textzeile im div Tag auf Rot festzulegen.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Pseudoelement-Selektor</title>
  <Stil>  
    div:erste-Zeile{
      Farbe: rot;
    }
  </Stil>
</Kopf>

<Text>
   <div>
     Lächeln ist der erste Glaube, Lächeln ist der erste Glaube, Lächeln ist der erste Glaube, Lächeln ist der erste Glaube, Lächeln ist der erste Glaube,
     Lächeln ist der erste Glaube, Lächeln ist der erste Glaube, Lächeln ist der erste Glaube, Lächeln ist der erste Glaube, Lächeln ist der erste Glaube.
   </div>
</body>
</html>

Ergebnisdiagramm

vor der Praxis

Verwenden Sie das „ before “-Attribut, um vor dem Text div Tags die beiden Wörter „Come on“ hinzuzufügen.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Pseudoelement-Selektor</title>
  <Stil>  
    div::vor{
      Inhalt: „Komm schon“;
    }
  </Stil>
</Kopf>

<Text>
   <div>Lächeln ist der erste Glaube. </div>
</body>

</html>

Ergebnisdiagramm

Hinweis: Der hinzugefügte Text muss innerhalb content:"加油"; geschrieben werden.

nach dem Training

Verwenden Sie after -Attribut, um die beiden Wörter „Come on“ am Ende des Textes div Tags hinzuzufügen.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Pseudoelement-Selektor</title>
  <Stil>  
    div::nach{
      Inhalt: „Komm schon“;
    }
  </Stil>
</Kopf>

<Text>
   <div>Lächeln ist der erste Glaube,</div>
</body>

</html>

Ergebnisdiagramm

Hinweis: Der hinzugefügte Text muss innerhalb content:"加油"; geschrieben werden.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<:  Analyse des Unterschieds zwischen fettgedrucktem <b> und <strong>

>>:  Spezifische Verwendung von Vues neuem Spielzeug VueUse

Artikel empfehlen

Notieren Sie einen Fehlerbehebungsbericht für die hohe CPU-Auslastung des Tomcat-Prozesses

Dieser Artikel zeichnet hauptsächlich einen Tomca...

14 praktische Erfahrungen zur Reduzierung von SCSS-Code um 50 %

Vorwort Sass ist eine Erweiterung der CSS3-Sprach...

Detaillierter Prozess der Installation und Konfiguration von MySQL und Navicat Prenium

Voraussetzung: Mac, zsh installiert, mysql herunt...

Ein Beispiel für die Umstellung der traditionellen Replikation auf GTID-Replikation ohne Geschäftsunterbrechung in MySQL 5.7

Aufgrund der Vorteile von GTID müssen wir die her...

Lösen Sie das Problem, dass Nginx nach der Konfiguration von proxy_pass 404 zurückgibt

Inhaltsverzeichnis 1. Fehlerbehebung und Lokalisi...

Regenbogen-Button-Stil erstellt mit CSS3

Ergebnis: Implementierungscode: html <div Klas...

So lösen Sie das Problem, dass sich Ubuntu 18.04 wiederholt anmeldet/auf der Boot-Oberfläche hängen bleibt/die grafische Oberfläche nicht aufrufen kann

Ursache: Der NVIDIA-Grafikkartentreiber ist besch...

So betten Sie Dateien im Flash-Videoformat (FLV, SWF) in HTML-Dateien ein

Flash-Dateiformate: .FLV und .SWF Für das Flash-Vi...

Fallstudie zu JavaScript-Ereignisschleifen

Ereignisschleife in js Da JavaScript ein Single-T...

Detaillierte Erklärung zur Installation der MySQL-Datenbank auf dem Alibaba Cloud Server

Vorwort Da ich während des Lernprozesses Zookeepe...

Details zur Datenanzeige der Vue3-Listenschnittstelle

Inhaltsverzeichnis 1. Beispiel für die Anzeige de...

Detaillierte Erklärung zum Erstellen eines FTP-Servers unter Ubuntu (Erfolg garantiert)

1. Heute Nachmittag musste ich aufgrund der Anfor...

JavaScript implementiert schnell Kalendereffekte

In diesem Artikelbeispiel wird der spezifische Ja...

Detaillierte Erläuterung von MySQL-Unterabfragen (verschachtelte Abfragen), Verknüpfungstabellen und kombinierten Abfragen

1. Unterabfrage MySQL 4.1 und höher unterstützen ...

Installieren Sie CentOS 7 auf VMware14 – Grafik-Tutorial

Einführung in CentOS CentOS ist eine Linux-Distri...