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

CSS

CSS中的nth-child和nth-of-type选择器

發(fā)布時間：2023/12/14 CSS 47 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS中的nth-child和nth-of-type选择器小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

CSS中的nth-child和nth-type-of選擇器

先寫一個例子

<head><style>*{margin: 0px;padding: 0px;}.item{vertical-align: top;border: 1px solid black;height: 200px;width: 200px;margin: 10px;display: inline-block;}</style> </head> <body><div class="item"><p>這是一個p標簽</p><p>這是一個p標簽</p><p>這是一個p標簽</p><p>這是一個p標簽</p><h2>這是一個h2</h2><h2>這是一個h2</h2><h2>這是一個h2</h2></div><div class="item"><p>這是一個p標簽</p><p>這是一個p標簽</p><p>這是一個p標簽</p><p>這是一個p標簽</p><h2>這是一個h2</h2><h2>這是一個h2</h2><h2>這是一個h2</h2></div><div class="item"><div>這是一個div</div><div>這是一個div</div><div>這是一個div</div></div><div class="item">這是一個div</div><div class="item">這是一個div</div><div class="item">這是一個div</div> </body>

現(xiàn)在的效果是這樣的

1，nth-child選擇器

:nth-child()是一個偽類選擇器：
括號里面內容可以放數(shù)字，表達式，以及代詞名稱。
冒號前面加空格代表選擇子級，不加空格代表選擇同級。。

1）選擇將同級div中的第一個div將其背景改為紅色

div:nth-child(1){backgroundColor:red;}

結果

2）選擇將div子級的第一個元素背景改為紅色，這里div后面有一個空格

div :nth-child(1){backgroundColor:red;}

不加空格就是同級同類，加空格就是子級所有元素

3)選擇前3個div，將背景改為紅色

div:nth-child(-n+3){background-color:red;}

4)選擇是2的倍數(shù)的div，將其背景改為紅色

div:nth-child(2n){background-color:red;}

5）選擇前2個div，將其背景改為紅色

div:nth-child(-n+2){background-color:red;}

nth-child中可以接收類似于 ‘a(chǎn)n+b’這種表達式，a，b為常數(shù)

當a，b都大于0的時候，被選擇的元素就是按照n取自然數(shù)后表達式的值來進行選擇的。

當a為 -1，b為某一個數(shù)的時候，表示選擇前幾個元素

再說明一下，不加空格操作的是同級元素，這個時候，在計數(shù)的時候，會把不同類的元素一起計數(shù)
還是這段代碼，但是我們將第4個元素改為p
選擇是2的倍數(shù)的div，將其背景改為紅色

div:nth-child(2n){background-color:red;}

可以發(fā)現(xiàn)p標簽被列入計數(shù)了，但是并沒有因為是偶數(shù)而被選擇。

2，nth-last-child選擇器

這個選擇器和nth-child選擇器幾乎相同，不同的是它所有的計數(shù)起點都是從最后一個開始。

3，nth-of-type選擇器

這個選擇器的語法規(guī)則和nth-child選擇器也幾乎是一樣的。。不同點則是,它不會將不同類的元素列入計數(shù)。
接著上面一個例子，比如：
選擇位置是2的倍數(shù)的div，將其背景改為紅色

div:nth-of-type(2n){background-color:red;}

這里就很明顯了，第4個p標簽并沒有被列入div標簽的計數(shù)行列。

4，nth-last-of-type選擇器

這個選擇器和nth-of-type選擇器幾乎相同，不同的是它所有的計數(shù)起點都是從最后一個開始。

總結

以上是生活随笔為你收集整理的CSS中的nth-child和nth-of-type选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

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