Heim Web-Frontend CSS-Tutorial 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

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 AM
位置 css样式 Pseudo-Klassenselektor

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

So 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>
Nach dem Login kopieren

CSS-Code:

ul li:nth-child(-n+5) {
  color: red;
}
Nach dem Login kopieren

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元素中存在其他类型的子元素,如divspan等,并不会对它们起作用,只会选择li元素。所以在使用该选择器时要注意HTML结构的层次关系。

除了文本颜色,:nth-child(-n+5)选择器也可以用于设置其他样式,比如背景色、字体大小等。只需要将color: red

Führen Sie den obigen Code aus und Sie werden feststellen, dass die Textfarbe der Listenelemente 1 bis 5 auf Rot eingestellt ist, während die Textfarbe der Listenelemente 6 bis 10 standardmäßig bleibt.

Es ist zu beachten, dass der Selektor :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!

Erklärung dieser Website
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

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Win11-Startpfad und wie man ihn öffnet Win11-Startpfad und wie man ihn öffnet Jan 03, 2024 pm 11:13 PM

Win11-Startpfad und wie man ihn öffnet

Details zum Aktivieren der Umgebungsvariableneinstellungen unter Windows 11 Details zum Aktivieren der Umgebungsvariableneinstellungen unter Windows 11 Dec 30, 2023 pm 06:07 PM

Details zum Aktivieren der Umgebungsvariableneinstellungen unter Windows 11

Verstehen Sie den Speicherort und die Struktur des Pip-Installationspaketspeichers Verstehen Sie den Speicherort und die Struktur des Pip-Installationspaketspeichers Jan 18, 2024 am 08:23 AM

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? Wo wird Kuaishou veröffentlicht und wie kann der Standort geändert werden? Wie füge ich einem hochgeladenen Video einen Standort hinzu? Mar 21, 2024 pm 06:00 PM

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 So ändern Sie den Standort von Gaode Map Home Feb 27, 2024 pm 07:31 PM

So ändern Sie den Standort von Gaode Map Home

Standort des Origami-Vogels im Stardome Railway Crocker Film and Television Park Standort des Origami-Vogels im Stardome Railway Crocker Film and Television Park Mar 27, 2024 pm 11:51 PM

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 Wo ist der Standort des Meituan Daily Vouchers? Einführung in den Standort des Meituan Daily Vouchers Mar 27, 2024 pm 05:11 PM

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

Wo ist die Last Era Arena? Wo ist die Last Era Arena? Mar 07, 2024 pm 08:16 PM

Wo ist die Last Era Arena?

See all articles