


So verwenden Sie den Pseudoklassenselektor nth-child(-n+5), um den CSS-Stil von untergeordneten Elementen auszuwählen, deren Position kleiner oder gleich 5 ist
Nov 20, 2023 am 11:52 AMSo verwenden Sie:nth-child(-n+5) Pseudoklassenselektor zur Auswahl des CSS-Stils von untergeordneten Elementen mit Positionen kleiner oder gleich 5
In CSS ist der Pseudoklassenselektor ein leistungsstarker Tool, das spezifische Auswahlmethoden sein kann, um bestimmte Elemente in HTML-Dokumenten auszuwählen. Unter diesen ist:nth-child() ein häufig verwendeter Pseudoklassenselektor, der untergeordnete Elemente an bestimmten Positionen auswählen kann.
:nth-child(n) kann mit dem n-ten untergeordneten Element in HTML übereinstimmen, und :nth-child(-n) kann mit dem vorletzten n-ten untergeordneten Element in HTML übereinstimmen. Durch die Kombination der beiden können wir :nth-child(-n+5) verwenden, um untergeordnete Elemente mit Positionen kleiner oder gleich 5 auszuwählen.
Die spezifischen Codebeispiele lauten wie folgt:
HTML-Code:
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> <li>列表项5</li> <li>列表项6</li> <li>列表项7</li> <li>列表项8</li> <li>列表项9</li> <li>列表项10</li> </ul>
CSS-Code:
ul li:nth-child(-n+5) { color: red; }
Im obigen Code haben wir den liul
-Element. /code> untergeordnetes Element und setzen Sie seine Textfarbe auf Rot. ul
元素中位置小于等于5的li
子元素,并将其文本颜色设置为红色。
运行以上代码,结果会发现列表项1到列表项5的文本颜色被设置为红色,而列表项6到列表项10的文本颜色保持默认。
需要注意的是,:nth-child()
选择器是基于子元素的位置进行选择的。如果在ul
元素中存在其他类型的子元素,如div
、span
等,并不会对它们起作用,只会选择li
元素。所以在使用该选择器时要注意HTML结构的层次关系。
除了文本颜色,:nth-child(-n+5)
选择器也可以用于设置其他样式,比如背景色、字体大小等。只需要将color: red
:nth-child()
basierend auf der Position des untergeordneten Elements auswählt. Wenn das ul
-Element andere Arten von Unterelementen enthält, wie z. B. div
, span
usw., funktioniert es bei ihnen nicht und wählt nur das li
-Element aus. Wenn Sie diesen Selektor verwenden, sollten Sie daher auf die hierarchische Beziehung der HTML-Struktur achten. 🎜🎜Zusätzlich zur Textfarbe kann der :nth-child(-n+5)
-Selektor auch zum Festlegen anderer Stile wie Hintergrundfarbe, Schriftgröße usw. verwendet werden. Ersetzen Sie einfach color: red
durch die entsprechende Stileinstellung. 🎜🎜Kurz gesagt: Durch die Verwendung des Pseudoklassenselektors :nth-child(-n+5) können wir einfach untergeordnete Elemente mit Positionen kleiner oder gleich 5 auswählen und bestimmte CSS-Stile auf sie anwenden, wodurch wir ein flexibleres Web erreichen Design . 🎜Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Pseudoklassenselektor nth-child(-n+5), um den CSS-Stil von untergeordneten Elementen auszuwählen, deren Position kleiner oder gleich 5 ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Win11-Startpfad und wie man ihn öffnet

Details zum Aktivieren der Umgebungsvariableneinstellungen unter Windows 11

Verstehen Sie den Speicherort und die Struktur des Pip-Installationspaketspeichers

Wo wird Kuaishou veröffentlicht und wie kann der Standort geändert werden? Wie füge ich einem hochgeladenen Video einen Standort hinzu?

So ändern Sie den Standort von Gaode Map Home

Standort des Origami-Vogels im Stardome Railway Crocker Film and Television Park

Wo ist der Standort des Meituan Daily Vouchers? Einführung in den Standort des Meituan Daily Vouchers
