Heim > Artikel > Web-Frontend > 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 SelektorAttributselektor
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)
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!