Was ist die Verwendung von nth in CSS?-Front-End-Fragen und Antworten-php.cn

Was ist die Verwendung von nth in CSS?

WBOY

Freigeben： 2022-04-27 18:34:39

Original

4032 Leute haben es durchsucht

n-te Verwendung: 1. „:nth-child(n)“ entspricht dem n-ten untergeordneten Element 2. „:nth-last-child(n)“ entspricht reziprok dem n-ten untergeordneten Element 3. „:nth-of- type(n)“ entspricht dem n-ten Unterelement desselben Typs; 4. „:nth-last-of-type(n)“.

Was ist die Verwendung von nth in CSS?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

Was ist die Verwendung von nth in CSS

1 :nth-child(n)

:nth-child(n) Der Selektor entspricht dem n-ten untergeordneten Element im übergeordneten Element und es gibt keine Begrenzung dafür der Elementtyp.

n kann eine Zahl, ein Schlüsselwort oder eine Formel sein.

Das Beispiel sieht wie folgt aus:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
p:nth-child(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
<p><b>注意:</b> Internet Explorer 8 以及更早版本的浏览器不支持 :nth-child()选择器.</p>
</body>
</html>

Nach dem Login kopieren

Ausgabeergebnis:

Was ist die Verwendung von nth in CSS?

2, :nth-last-child(n)

:nth-last-child(n) Der Selektor stimmt mit dem Element überein das dazu gehört Jedes Element von N untergeordneten Elementen, unabhängig vom Typ des Elements, wird beginnend mit dem letzten untergeordneten Element gezählt.

n kann eine Zahl, ein Schlüsselwort oder eine Formel sein.

Das Beispiel sieht wie folgt aus:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
p:nth-last-child(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p><b>注意:</b> Internet Explorer 8 以及更早版本的浏览器不支持:nth-last-child()选择器.</p>
</body>
</html>

Nach dem Login kopieren

Ausgabeergebnis:

Was ist die Verwendung von nth in CSS?

3, :nth-of-type(n)

:nth-of-type(n) Selector entspricht dem n-ten der gleichartige Brüder auf dem gleichen Niveau.

n kann eine Zahl, ein Schlüsselwort oder eine Formel sein.

Das Beispiel sieht wie folgt aus:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
p:nth-of-type(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</body>
</html>

Nach dem Login kopieren

Ausgabeergebnis:

Was ist die Verwendung von nth in CSS?

4, :nth-last-of-type(n)

:nth-last-of-type(n) Selector entspricht dem gleicher Typ Das vorletzte n-te Geschwisterelement von .

n kann eine Zahl, ein Schlüsselwort oder eine Formel sein.

Das Beispiel sieht wie folgt aus:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
p:nth-last-of-type(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p><b>注意:</b> Internet Explorer 8以及更早版本的浏览器不支持:nth-last-of-type() 选择器.</p>
</body>
</html>

Nach dem Login kopieren

Ausgabeergebnis:

Was ist die Verwendung von nth in CSS?

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWas ist die Verwendung von nth in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!