Heim > Artikel > Web-Frontend > Was ist die Funktion von:nth-child(n)
Was ist die Funktion von:nth-child(n)
- 青灯夜游Original
- 2021-01-27 18:43:3032545Durchsuche
":nth-child(n)" ist ein Selektor in CSS. Seine Funktion besteht darin, das N-te untergeordnete Element abzugleichen, das zu seinem übergeordneten Element gehört. Der Parameter „n“ kann dabei ein sein Zahl oder Schlüsselwort oder Formel wie „:nth-child(3)“, „:nth-child(even)“.
Die Betriebsumgebung dieses Artikels: Acer S40-51, CSS3&&HTML5&&HBuilder Wird zum Auswählen von Elementen verwendet, die gestaltet werden müssen. nth-child(n) ist ein Selektor in CSS3.
:nth-child(n)-Selektor wird verwendet, um das untergeordnete Element abzugleichen, dessen übergeordneter Elementindex n ist, d. h. um das N-te untergeordnete Element auszuwählen, das zu seinem übergeordneten Element gehört, unabhängig vom Elementtyp. Erklärung: n kann eine Zahl, ein Schlüsselwort (ungerade und gerade) oder eine Formel sein.
Beispiel 1: Wenn n eine Zahl ist.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:nth-child(n)选择器</title>
<style>
/*
:nth-child(n)选择器用于匹配父元素索引为n的子元素，即选取属于其父元素的第N个子元素，不论元素的类型。
n可以是数字、关键词（Odd 和 even）或公式。
*/
/* p:nth-child(2) {
background: pink;
} */
</style>
</head>
<body>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
</body>
</html>. n ist Formel <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:nth-child(n)选择器</title>
<style>
p:nth-child(odd) {
background: pink;
}
p:nth-child(even) {
background: paleturquoise;
}
</style>
</head>
<body>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
<p>第六个段落。</p>
<p>第七个段落。</p>
<p>第八个段落。</p>
<p>第九个段落。</p>
<p>第十个段落。</p>
</body>
</html>Rendering:
Verwenden Sie die Formel (an + b). Beschreibung: Gibt die Länge der Periode an, n ist der Zähler (beginnend bei 0) und b ist der Offsetwert.
Hier geben wir die Hintergrundfarbe aller p-Elemente an, deren Indizes ein Vielfaches von 3 sind: 
Programmier-Tutorial
! !Das obige ist der detaillierte Inhalt vonWas ist die Funktion von:nth-child(n). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!