CSS3——:nth-child選擇器基本用法簡述
阿新 • • 發佈:2018-12-20
注:n 是從1開始的
:nth-child 是 CSS3 提供的一個好用的選擇器,因為在專案中經常用到,所以簡單總結了它的常用方法
下面示例程式碼截圖用的是同一個例子,p元素的父元素都是body
p:nth-child(2) 表示給第2個p元素新增背景色,p:nth-child(3)是第3個p元素,以此類推
p:nth-child(2)
承接上面的示例,如果這裡的p元素前面還有其它元素,結果如下圖,段落1被新增背景色,而不是上面示例的段落2被新增背景色,
因為這裡的p:nth-child(1)為h1元素,,所以p:nth-child(2)才為p元素
p:nth-child(3n)
表示給3的倍數的p元素新增背景色,2n就是2的倍數,4n就是4的倍數,以此類推
p:nth-child(odd) 表示給所有奇數p元素新增背景色 p:nth-child(even) 表示給所有偶數p元素新增背景色
使用公式 (an + b),描述:表示週期的長度,n 是計數器(從 0 開始),b 是偏移值
另外需要特別注意的是,an 必須寫在 b 的前面,不能寫成 b+an 的形式
注:公式裡的n,不區分大小寫
p:nth-child(2n+1)
可以簡單理解為等同於 p:nth-child(odd)
p:nth-child(2n+0)
可以簡單理解為等同於 p:nth-child(even)
p:nth-child(n+2) 表示正向範圍,從第2個p元素開始(包括第2個p元素)到最後一個p元素都新增背景色(這裡範圍指2-5)
p:nth-child(-n+5)
表示負向範圍,從最後一個p元素(包括最後一個元素)到第一個p元素都新增背景色(這裡範圍指5-1)