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

Probleme bei der Installation von Python3 und Pip in Ubuntu in Docker

Text 1) Laden Sie das Ubuntu-Image herunter Docke...

Erstellen Sie einen stabilen und hochverfügbaren Cluster basierend auf MySQL + MyCat, Lastausgleich, Master-Slave-Replikation und Lese-/Schreibtrennung

Bei der Optimierung der Datenbankleistung wird im...

MySQL Series 10 MySQL-Transaktionsisolierung zur Implementierung der Parallelitätskontrolle

Inhaltsverzeichnis 1. Gleichzeitige Zugriffskontr...

Lösungsideen und Implementierungsschritte für das Problem, dass CSS und JS nach einem Struts2-Sprung ungültig werden

Wenn die JSP angezeigt wird, zu der nach der Ausfü...

Lösung für das Problem des verstümmelten Codes in MySQL 5.x

MySQL ist eine häufig verwendete Open-Source-Date...

Installation und Bereitstellung des Linux-Tools Nethogs zur Überwachung der Netzwerkbandbreite nach Prozess

Überblick Es gibt viele Open-Source-Tools zur Net...

Tiefgreifendes Verständnis mathematischer Ausdrücke in CSS calc()

Der mathematische Ausdruck calc() ist eine Funkti...

Details zu den Überwachungseigenschaften der Uhr in Vue

Inhaltsverzeichnis 1.watch überwacht Änderungen i...

js implementiert das klassische Minesweeper-Spiel

In diesem Artikelbeispiel wird der spezifische Co...

Docker-Kern und spezifische Verwendung der Installation

1. Was ist Docker? (1) Docker ist ein Open-Source...

Beispiel für das Abhören des Vue-Routings zum dynamischen Laden derselben Seite

Inhaltsverzeichnis Szenarioanalyse Entwicklung Zu...

Beim Einrichten von Jenkins in einer Docker-Umgebung werden im Konsolenprotokoll beim Erstellen von Aufgaben verstümmelte chinesische Zeichen angezeigt

Inhaltsverzeichnis 1. Problembeschreibung: 2. Feh...

Zusammenfassung der MySQL InnoDB-Sperren

Inhaltsverzeichnis 1. Gemeinsam genutzte und exkl...

So installieren und speichern Sie die PostgreSQL-Datenbank in Docker

Überspringen Sie die Docker-Installationsschritte...

Vue implementiert horizontal abgeschrägtes Balkendiagramm

In diesem Artikel wird der spezifische Code von V...