<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)
複製代碼