Heim  >  Artikel  >  Web-Frontend  >  Ist die Klassennamenauswahl neu in CSS3?

Ist die Klassennamenauswahl neu in CSS3?

WBOY
WBOYOriginal
2022-06-20 15:48:461411Durchsuche

Der Klassennamenselektor ist nicht neu in CSS3. Der Klassennamenselektor wird verwendet, um Elemente mit einer bestimmten Klasse auszuwählen. Die Syntax lautet „.class{CSS-Code;}“. Der Klassennamenselektor wurde vor CSS3 verwendet. Es ist nichts Neues in CSS3. Zu den neuen Selektoren in CSS3 gehören Attributselektoren, strukturelle Pseudoklassenselektoren usw.

Ist die Klassennamenauswahl neu in CSS3?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer. Klassennamenauswahl Es (Sein Klassenname) wird von ihm ausgewählt, dies ist der Klassenselektor.

Erweiterte Kenntnisse: CSS3 neuer Selektor

Attributselektor

input[value] { } (Eingabe und hat Wertattribut)

input[type=text] {} {Attribute der Eingabe Der Wert von Text muss geändert werden}

div[class^=icon] { } (Wählen Sie zuerst die Elemente aus, die div sind und dann Klassenattribute haben, und die Attributwerte müssen mit icon beginnen)

  • section[class $= data] {} (wählen Sie den Klassennamen aus, der mit data endet)

  • struktureller Pseudoklassenselektor

  • ul li:first-child {} (wählen Sie das erste untergeordnete li in ul aus)

  • ul li:last-child { } (wähle das letzte Kind li in ul)

ul li:nth-child(2) { } (wähle das zweite Kind li in ul)

  • ul li:nth-child (6) { } (Wählen Sie das sechste Kind li in ul aus)

  • ul li:nth-child(even/2n) { } (Wählen Sie alle geraden Kinder aus)

  • ul li:nth-child( odd/2n+1) { } (Wählen Sie alle Kinder mit ungeraden Zahlen aus)

  • ol li:nth-child(n) { } (Beginnen Sie bei 0. Jedes Mal, wenn Sie 1 addieren, muss die Berechnung rückwärts n sein. It Es dürfen keine anderen Buchstaben sein.

  • ul li:nth-child(n+5) { } (auswählen ab dem fünften Kind)

  • ul li:nth-child(-n+5) { } (Wählen Sie die Zählung ab dem fünften Kind aus)

  • ul li:first-of-type { } (Erstes Kind)

  • ul li:last-of-type { } (letztes Kind)

  • ul li:nth-of-type(even) { } (even child)

  • section div:nth-child(1) { } (nth-child ordnet alle Felder mit fortlaufenden Nummern an. Schauen Sie bei der Ausführung zuerst nach at: nth-child(1) und gehen Sie dann zurück und schauen Sie sich das vorherige div an)

  • Abschnitt div:nth-of-type(1) { } (nth -of-type ordnet die Kästchen des angegebenen Elements an Schauen Sie sich bei der Ausführung zuerst das durch das div angegebene Element an und schauen Sie sich dann Folgendes an: n-ter Typ (1) welches Kind)

  • Pseudoelementselektor (auf der Seite Nicht oft gefunden). wird für Schriftart-Tags verwendet) [Gleiches wie Tag-Selektor, Gewicht ist 1]

  • ::before Inhalt vor dem Element einfügen (vor der Innenseite des übergeordneten Felds)

  • ::after in Inhalt einfügen nach dem Element (hinter der Innenseite der übergeordneten Box)

muss das Inhaltsattribut

  • div::after { content: 'I';}

  • .tudou:hover::before { } haben (Wenn unsere Maus über die Kartoffelkiste fährt, wird die Vormaskenebene im Inneren angezeigt)

  • Pseudoelemente werden klar und schwebend

  • (Teilen von Lernvideos:

    CSS-Video-Tutorial
  • ,
  • HTML-Video-Tutorial

    )

Das obige ist der detaillierte Inhalt vonIst die Klassennamenauswahl neu in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn