當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS——nth-child和nth-of-type的区别以及nth-of-type下的坑

發布時間：2023/12/14 javascript 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS——nth-child和nth-of-type的区别以及nth-of-type下的坑小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS3:nth-child()選擇器

:nth-child(n)選擇器匹配屬于其父元素的第n個子元素，無論元素的類型

<!DOCTYPE html> <html><head><style>/* 選擇的是p元素的父元素下的第二個子元素（無論類型）的每個p的背景色為red */p:nth-child(2) {background: red;}</style> </head><body><h1>這是標題</h1><p>第一個段落。</p><p>第二個段落。</p><p>第三個段落。</p><p>第四個段落。</p><p><b>注釋：</b>Internet Explorer 不支持 :nth-child() 選擇器。</p></body></html>

實例1

Odd 和 even 是可用于匹配下標是奇數或偶數的子元素的關鍵詞（第一個子元素的下標是 1）。

在這里，我們為奇數和偶數 p 元素指定兩種不同的背景色：

<!DOCTYPE html> <html><head><style>/* 選擇的是p元素其父元素下所有的基數元素（無論類型）下p的樣式 */p:nth-child(odd) {background: #ff0000;}/* 選擇的是p元素其父元素下所有的偶數元素（無論類型）下p的樣式 */p:nth-child(even) {background: #0000ff;}</style> </head><body><h1>這是標題</h1><p>第一個段落。</p><p>第二個段落。</p><p>第三個段落。</p><p>第四個段落。</p><p><b>注釋：</b>Internet Explorer 不支持 :nth-child() 選擇器。</p></body></html>

實例2

使用公式 (an + b)。描述：表示周期的長度，n 是計數器（從 0 開始），b 是偏移值。

在這里，我們指定了下標是 3 的倍數的所有 p 元素的背景色：

<!DOCTYPE html> <html><head><style>/* 選擇的是p元素其父元素下所有子元素小標為3倍的p元素：0、3、6 */p:nth-child(3n+0) {background: #ff0000;}</style> </head><body><h1>這是標題</h1><p>第一個段落。</p><p>第二個段落。</p><p>第三個段落。</p><p>第四個段落。</p><p>第五個段落。</p><p>第六個段落。</p><p>第七個段落。</p><p>第八個段落。</p><p>第九個段落。</p><p><b>注釋：</b>Internet Explorer 不支持 :nth-child() 選擇器。</p></body></html>

CSS3:nth-of-type()選擇器

:nth-of-type(n) 選擇器匹配屬于父元素的特定類型的第 N 個子元素的每個元素.

n 可以是數字、關鍵詞或公式。

<!DOCTYPE html> <html><head><style>/* 選擇的是p元素的父元素下的第二個子元素（必須為p元素）的每個p的背景色為red */p:nth-of-type(2) {background: red;}</style> </head><body><h1>這是標題</h1><p>第一個段落。</p><p>第二個段落。</p><p>第三個段落。</p><p>第四個段落。</p><p><b>注釋：</b>Internet Explorer 不支持 :nth-child() 選擇器。</p></body></html>

實例1

Odd 和 even 是可用于匹配下標是奇數或偶數的子元素的關鍵詞（第一個子元素的下標是 1）。

在這里，我們為奇數和偶數 p 元素指定兩種不同的背景色：

<!DOCTYPE html> <html><head><style>p:nth-of-type(odd) {background: #ff0000;}p:nth-of-type(even) {background: #0000ff;}</style> </head><body><h1>這是標題</h1><p>第一個段落。</p><p>第二個段落。</p><p>第三個段落。</p><p>第四個段落。</p><p>第五個段落。</p></body></html>

實例2

使用公式 (an + b)。描述：表示周期的長度，n 是計數器（從 0 開始），b 是偏移值。

在這里，我們指定了下標是 3 的倍數的所有 p 元素的背景色：

<!DOCTYPE html> <html><head><style>p:nth-of-type(3n+0) {background: #ff0000;}</style> </head><body><h1>這是標題</h1><p>第一個段落。</p><p>第二個段落。</p><p>第三個段落。</p><p>第四個段落。</p><p>第五個段落。</p><p>第六個段落。</p><p>第七個段落。</p><p>第八個段落。</p><p>第九個段落。</p></body></html>

使用 nth-of-type選擇類名下的坑

如果是 .class:nth-of-type(n)所選出的html元素必須同時符合以下條件：

類屬性中包含 class
包含該屬性的元素必須是其父元素下子元素的第n個

<!DOCTYPE html> <html><head><style>html {font-size: 16px;}.ems:nth-last-of-type(1) li {font-size: 1.3em;}.rems li {font-size: 1.3rem;}</style> </head><body><ul class="ems"><li>One</li><li>Two</li><li>Three<ul><li>Three A</li><li>Three B<ul><li>Three B 2</li></ul></li></ul></li></ul><ul class="ems"><li>One</li><li>Two</li><li>Three<ul><li>Three A</li><li>Three B<ul><li>Three B 2</li></ul></li></ul></li></ul></div><ul class="rems"><li>One</li><li>Two</li><li>Three<ul><li>Three A</li><li>Three B<ul><li>Three B 2</li></ul></li></ul></li></ul></body></html>

效果圖：

原因：.ems:nth-last-of-type(1)選擇的是含有 ems類名的元素ul，但由于該ul并不是同級別下ul的最后一個（含有rems類名的ul才是最后一個）。所以這句話并不對第二個ul生效。

對此，我們有兩種解決方式：

方式一、使含有ems類名的標簽作為同級別元素下的最后一個（推薦）

可對于兩個含有ems的ul元素使用div進行包裹

<!DOCTYPE html> <html><head><style>html {font-size: 16px;}.ems:nth-last-of-type(1) li {font-size: 1.3em;}.rems li {font-size: 1.3rem;}</style> </head><body><div><ul class="ems"><li>One</li><li>Two</li><li>Three<ul><li>Three A</li><li>Three B<ul><li>Three B 2</li></ul></li></ul></li></ul><ul class="ems"><li>One</li><li>Two</li><li>Three<ul><li>Three A</li><li>Three B<ul><li>Three B 2</li></ul></li></ul></li></ul></div><ul class="rems"><li>One</li><li>Two</li><li>Three<ul><li>Three A</li><li>Three B<ul><li>Three B 2</li></ul></li></ul></li></ul></body></html>

效果圖：

方式二、設置其真實的n值（不推薦）

對于該場景下，只需要把 .ems:nth-last-of-type(1) 改為 ems:nth-last-of-type(2)即可，因為含有ems類名的第二個ul標簽其實是作為同級同類型標簽下的倒數第二個

<!DOCTYPE html> <html><head><style>html {font-size: 16px;}.ems:nth-last-of-type(2) li {font-size: 1.3em;}.rems li {font-size: 1.3rem;}</style> </head><body><ul class="ems"><li>One</li><li>Two</li><li>Three<ul><li>Three A</li><li>Three B<ul><li>Three B 2</li></ul></li></ul></li></ul><ul class="ems"><li>One</li><li>Two</li><li>Three<ul><li>Three A</li><li>Three B<ul><li>Three B 2</li></ul></li></ul></li></ul><ul class="rems"><li>One</li><li>Two</li><li>Three<ul><li>Three A</li><li>Three B<ul><li>Three B 2</li></ul></li></ul></li></ul></body></html>

效果圖：

參考：https://blog.csdn.net/tinyleaf/article/details/81627782

總結

以上是生活随笔為你收集整理的JS——nth-child和nth-of-type的区别以及nth-of-type下的坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。