html代碼：

<div><p>多云轉晴</p><p>多云轉晴</p><p>多云轉晴</p><p>多云轉晴</p><p>多云轉晴</p> </div>

?

一、nth-child

1.1、nth-child(n) ? ? 父元素下的第n個子元素，n必須大于0，索引都是從1開始。

div p:nth-child(2){background: skyblue; }

?

ps、這里僅僅說是父元素的第幾個子元素，而并沒有限制該類型的子元素。比如：

<div><h3>天氣</h3><p>多云轉晴</p><p>多云轉晴</p><p>多云轉晴</p><p>多云轉晴</p><p>多云轉晴</p> </div>

運行之后：

?

1.2、nth-child(odd) ? 父元素下的奇數子元素 ?等同于?nth-child(2n-1)

div p:nth-child(odd){background: skyblue; }

ps、這貨是區分子元素類型的，比如：

<div><h3>天氣</h3><h3>天氣</h3><p>多云轉晴</p><p>多云轉晴</p><p>多云轉晴</p><p>多云轉晴</p><p>多云轉晴</p> </div>

?

1.3、nth-child(even) ?父元素下的偶數子元素 同樣區分子元素類型 ? 等同于nth-child(2n)

div p:nth-child(even){background: skyblue; }

?

1.4、nth-child(an+b) ? 公式計算 n可以為0

div p:nth-child(2n+1){background: skyblue; }

ps、區分子元素類型的，父元素的an+b個子元素，但是該元素必須是p

?

1.5、first-child ??選擇父元素下的第一個子元素 如果第一個子元素不是該類型，選擇不到 ?等同于?nth-child(1)

div p:first-child{background: skyblue; }

?

1.6、last-child ? ?選擇父元素下的最后一個子元素 如果最后一個子元素不是該類型，選擇不到

div p:last-child{background: skyblue; }

?

二、nth-of-type ?匹配屬于父元素的特定類型的第 N 個子元素的每個元素 忽略不是該類型的元素的存在

<div><h3>天氣</h3><p>多云轉晴</p><p>多云轉晴</p><p>多云轉晴</p><p>多云轉晴</p><p>多云轉晴</p> </div> div p:nth-of-type(1){background: skyblue; }

?

?

轉載于:https://www.cnblogs.com/xlj-code/p/8041884.html

總結

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

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