nth-child和nth-of-type的區(qū)別

這篇文章給大家分享的是nth-child和nth-of-type的區(qū)別，讓大家了解nth-child和nth-of-type分別是怎樣工作的。如下資料是關(guān)于nth-child和nth-of-type區(qū)別的內(nèi)容。

nth-child()和nth-of-type()都是css的“結(jié)構(gòu)”偽類選擇器，這些偽類選擇器允許我們基于文檔樹中的信息選擇元素，這些元素通常不能由其他簡單選擇器表示。

就nth-child()和nth-of-type()來說，額外信息是元素在文檔樹中相對于其父元素和兄弟元素的位置。 盡管這兩個(gè)偽類非常相似，但它們的工作方式卻截然不同。

nth-child()是怎樣工作的？

nth-child()偽類用于根據(jù)數(shù)字匹配元素，該數(shù)字表示元素在其兄弟元素中的位置。更具體地說，數(shù)字表示文檔樹中元素（減去1）之前存在的兄弟姐妹的數(shù)量。

這個(gè)數(shù)表示為函數(shù)a+b，其中n是索引，a和b是我們通過的任何整數(shù)。例如，為了選擇每一個(gè)元素，我們可以編寫以下任何一個(gè)：

:nth-child(1n+0) { /* 樣式 */ }
:nth-child(n+0) { /* 樣式 */ }
:nth-child(1n) { /* 樣式 */ }

除了使用這個(gè)函數(shù)，我們還可以傳遞一個(gè)整數(shù)，例如 :nth-child(1)，或者set關(guān)鍵字，odd（奇數(shù)）或者even（偶數(shù)）。這些關(guān)鍵字是寫出用于選擇每個(gè)奇數(shù)或偶數(shù)元素的函數(shù)符號的備選方案。

:nth-child(odd) { /* 奇數(shù)元素的樣式 */ }
:nth-child(2n+1) { /* 奇數(shù)元素的樣式 */ }

:nth-child(even) { /* 偶數(shù)元素的樣式 */ }
:nth-child(2n+0) { /* 偶數(shù)元素的樣式 */ }

:nth-child()單獨(dú)使用時(shí)，可以很容易地預(yù)測選擇哪個(gè)元素。例如，使用此標(biāo)記：

<div class="example">
	<p>This is a <em>paragraph</em>.</p>
	<p>This is a <em>paragraph</em>.</p>
	<p>This is a <em>paragraph</em>.</p>
	<div>This is a <em>divider</em>.</div>
	<div>This is a <em>divider</em>.</div> <!-- 選擇元素-->
	<p>This is a <em>paragraph</em>.</p>
	<p>This is a <em>paragraph</em>.</p>
	<div>This is a <em>divider</em>.</div>
	<p>This is a <em>paragraph</em>.</p>
	<div>This is a <em>divider</em>.</div>
</div>

如果我們想選擇第五個(gè)元素div，我們可以簡單地寫下面的內(nèi)容

.example :nth-child(5) { background: #ffdb3a; }

但是，當(dāng)存在多種類型的元素時(shí)，可能會出現(xiàn)意外結(jié)果，并且我們需要將:nth-child()偽類與類型或類選擇器組合在一起。例如，要再次選擇相同的div元素，我們可能會嘗試編寫以下內(nèi)容：

.example div:nth-child(2) { background: #ffdb3a; }

這段代碼不起作用！

不起作用的原因是因?yàn)檫x擇器所針對的元素實(shí)際上并不存在。使用上述選擇器，將執(zhí)行以下步驟

1、選擇所有 .example的子元素

2、查找該列表中的第二個(gè)元素，無論其類型如何

3、檢查該元素是否是div的類型

由于文檔樹中的第二個(gè)元素是段落，而不是div，因此不會選擇任何內(nèi)容。如果我們想要選擇第二個(gè)div元素，我們將不得不使用nth-of-type()偽類。

nth-of-type()是怎樣工作的？

nth-of-type()偽類，如nth-child()一樣，是用于根據(jù)一個(gè)元素匹配一個(gè)元素。然而，它里面的數(shù)字表示元素的位置僅在其兄弟姐妹中具有相同元素類型的位置。

nth-of-type()里面的參數(shù)也可以表示為函數(shù)，或使用關(guān)鍵字even或odd。使用上面的示例標(biāo)記，我們可以通過寫入選擇所有奇數(shù)段落：

.example p:nth-of-type(odd) { background: #ffdb3a; }

當(dāng)我們使用此選擇器時(shí)，將執(zhí)行以下步驟：

1、選擇.example的所有p類型子元素

2、僅創(chuàng)建這些元素的新列表

3、從列表中選擇奇數(shù)

因此，我們現(xiàn)在可以選擇.example的第二個(gè)div，即第五個(gè)孩子：

.example div:nth-of-type(2) { /* 樣式 */ }

以上就是nth-child和nth-of-type區(qū)別的知識匯總，內(nèi)容較為全面，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ骺赡軙姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。