Ist die Klassennamenauswahl neu in CSS3?

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.

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!