1. 程式人生 > >CSS3——:nth-child選擇器基本用法簡述

CSS3——:nth-child選擇器基本用法簡述

    

  

   注: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)