CSS3 序選擇器運算公式

<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p>
<p>我是段落9</p>
複製代碼

需求 : 選中上面標籤的 偶數 標籤 , 而且設置文字顏色爲 紅色css

p:nth-child(2n){
    color:"red";
}
複製代碼

需求 : 選中上面標籤的 奇數 標籤 , 而且設置文字顏色爲 藍色bash

p:nth-child(2n + 1){
   color:"blue";
}
複製代碼

因此重點了解一下 nth-child(xn+y)spa

:nth-child(xn+y)
           x : 用戶自定義
           n : 查看選擇了多少個元素, 從零開始依次遞增元素 
           y : 用戶自定義      (使用 xn 運算後的結果 + y 得出最後的結果)

       注意點 : 
           y 是能夠被省略  :nth-child(xn)
複製代碼
選擇偶數 
       nth-child(2n)
       選擇奇數
       nth-child(2n + 1)
       選擇 3 的倍數
       nth-child(3n)
複製代碼
相關文章
相關標籤/搜索