中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

nth-child和nth-of-type的區別

發布時間:2020-05-13 10:08:11 來源:億速云 閱讀:372 作者:Leah 欄目:web開發

這篇文章給大家分享的是nth-child和nth-of-type的區別,讓大家了解nth-child和nth-of-type分別是怎樣工作的。如下資料是關于nth-child和nth-of-type區別的內容。

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

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

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

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

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

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

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

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

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

:nth-child()單獨使用時,可以很容易地預測選擇哪個元素。例如,使用此標記:

<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>

如果我們想選擇第五個元素div,我們可以簡單地寫下面的內容

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

nth-child和nth-of-type的區別

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

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

這段代碼不起作用!

不起作用的原因是因為選擇器所針對的元素實際上并不存在。使用上述選擇器,將執行以下步驟

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

2、查找該列表中的第二個元素,無論其類型如何

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

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

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

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

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

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

nth-child和nth-of-type的區別

當我們使用此選擇器時,將執行以下步驟:

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

2、僅創建這些元素的新列表

3、從列表中選擇奇數

因此,我們現在可以選擇.example的第二個div,即第五個孩子:

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

以上就是nth-child和nth-of-type區別的知識匯總,內容較為全面,小編相信有部分知識點可能是我們日常工作可能會見到或用到的。希望你能通過這篇文章學到更多知識。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

合江县| 富民县| 广德县| 靖宇县| 永丰县| 灯塔市| 靖远县| 邯郸市| 崇州市| 额济纳旗| 镇原县| 成武县| 平利县| 福建省| 上思县| 峨边| 迁西县| 涡阳县| 咸宁市| 米林县| 达拉特旗| 寿宁县| 乐亭县| 共和县| 南皮县| 吴江市| 大庆市| 绍兴市| 健康| 黄平县| 合山市| 分宜县| 孟连| 福贡县| 遂溪县| 松原市| 祥云县| 泰来县| 大理市| 通州区| 扶沟县|