“:nth-child(n)”選擇器用來定位某個父元素的一個或多個特定的子元素。其中“n”是其參數,而且可以是整數值(1,2,3,4),也可以是表達式(2n+1、-n+5)和關鍵詞(odd、even),但參數n的起始值始終是1,而不是0。也就是說,參數n的值為0時,選擇器將選擇不到任何匹配的元素。
經驗與技巧:當“:nth-child(n)”選擇器中的n為一個表達式時,其中n是從0開始計算,當表達式的值為0或小于0的時候,不選擇任何匹配的元素。如下表所示:
案例演示
通過“:nth-child(n)”選擇器,并且參數使用表達式“2n”,將偶數行列表背景色設置為橙色。
HTML代碼:
<ol> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> <li>item9</li> <li>item10</li> </ol>?
CSS代碼:
ol > li:nth-child(2n){ background: orange; }
演示結果:
在右邊CSS編輯器中第一行輸入正確的代碼,讓奇數行背景色變成綠色。
nth-child標簽是否書寫正確
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報