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

Reines CSS-Dropdown-Menü

Ergebnisse erzielen Implementierungscode html <...

js, um einen einfachen Kalendereffekt zu erzielen

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

So kapseln Sie die Rich-Text-Komponente von WangEditor in Angular

Die Rich-Text-Komponente ist eine sehr häufig ver...

Zusammenfassung des Wissens zu MySQL-Sperren

Sperren in MySQL Sperren sind ein Mittel, um Ress...

So verwenden Sie das JQuery-Editor-Plugin tinyMCE

Ändern Sie die vereinfachte Dateigröße und laden ...

So verbergen Sie die Versionsnummer und die Cache-Zeit von Webseiten in Nginx

Nginx-Optimierung --- Versionsnummer und Cache-Ze...

Mehrere Möglichkeiten zum Löschen von Arrays in Vue (Zusammenfassung)

Inhaltsverzeichnis 1. Einleitung 2. Mehrere Mögli...

Java importiert Daten aus Excel in MySQL

Manchmal müssen wir bei unserer tatsächlichen Arb...

So sorgen Sie für eine hohe Konsistenz von CSS-Unterelementen mit übergeordneten Elementen

Absolute Positionierungsmethode: (1) Stellen Sie ...

Detaillierte Erläuterung der zugrunde liegenden Kapselung der Java-Verbindung zu MySQL

In diesem Artikel wird der der Java-Verbindung zu...

MySQL sql_mode-Analyse und Einstellungserklärung

Beim Einfügen eines Datensatzes in die MySQL-Date...

Detaillierte Erklärung zur Migration einer MySQL-Datenbank auf einen anderen Computer

1. Suchen Sie zunächst die Datendatei auf dem Mig...

Web 2.0: Ursachen und Lösungen der Informationsüberflutung

<br />Informationsduplikation, Informationsü...

Reagieren Sie auf die Konstruktionsreihenfolge verschachtelter Komponenten

Inhaltsverzeichnis Auf der offiziellen React-Webs...

Häufige Szenarien und Vermeidungsmethoden für Indexfehler in MySQL

Vorwort Ich habe zuvor viele ähnliche Artikel gel...