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

5 häufig verwendete Objekte in JavaScript

Inhaltsverzeichnis 1. JavaScript-Objekte 1).Array...

Verwendung des Linux-Befehls usermod

1. Befehlseinführung Der Befehl usermod (user mod...

Detaillierte Erklärung der Eigenschaften und Instanzverwendung von hasOwnProperty in js

1. js schützt hasOwnProperty nicht vor unrechtmäß...

Ubuntu installiert mehrere Versionen von CUDA und wechselt jederzeit

Ich werde nicht erklären, was CUDA ist, sondern d...

Mysql-Lösung zur Verbesserung der Effizienz beim Kopieren großer Datentabellen

Vorwort Dieser Artikel stellt hauptsächlich den r...

Nginx-Konfiguration domänenübergreifende Anforderung Access-Control-Allow-Origin * detaillierte Erklärung

Vorwort Wenn ein 403-Cross-Origin-Fehler auftritt...

Erfahren Sie, wie Sie die neue Element-Traversal-Eigenschaft von JavaScript zum Durchlaufen von untergeordneten Elementen verwenden.

Inhaltsverzeichnis 1. ChildNodes-Attributdurchlau...

Neuer Ansatz zum Umschalten der Tab-Leiste mit zwei Auswahlmöglichkeiten in Vue

Problembeschreibung Wenn wir an einem Projekt arb...

So konfigurieren Sie MySQL auf einem Ubuntu-Server und implementieren eine Remote-Verbindung

Server: Ubuntu Server 16.04 LSS Kunde: Ubuntu 16....

Beispiel zum Festlegen der automatischen Erstellungszeit und Änderungszeit in MySQL

In diesem Artikel wird beschrieben, wie Sie die a...

Beispielanalyse der Auswirkungen des MySQL-Index auf die Sortierung

Dieser Artikel veranschaulicht anhand von Beispie...

js implementiert Axios Limit-Anforderungswarteschlange

Inhaltsverzeichnis Der Hintergrund ist: Was wird ...

Tutorial-Diagramm zur Installation von Zabbix2.4 unter Centos6.5

Die feste IP-Adresse des Centos-DVD1-Versionssyst...

Einführung in die CSS-Stilklassifizierung (Grundkenntnisse)

Klassifizierung von CSS-Stilen 1. Interner Stil -...

So verstehen Sie den einfachen Speichermodus der Statusverwaltung von Vue

Inhaltsverzeichnis Überblick 1. Definieren Sie st...