“:nth-child(n)”選擇器用來定位某個父元素的一個或多個特定的子元素
。其中“n”是其參數(shù),而且可以是整數(shù)值(1,2,3,4),也可以是表達式(2n+1、-n+5)和關(guān)鍵詞(odd、even),但參數(shù)n的起始值始終是1,而不是0。也就是說,參數(shù)n的值為0時,選擇器將選擇不到任何匹配的元素。
經(jīng)驗與技巧:當(dāng)“:nth-child(n)”選擇器中的n為一個表達式時,其中n是從0開始計算,當(dāng)表達式的值為0或小于0的時候,不選擇任何匹配的元素。如下表所示:
案例演示
通過“:nth-child(n)”選擇器,并且參數(shù)使用表達式“2n”,將偶數(shù)行列表背景色設(shè)置為橙色。
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;
}
演示結(jié)果: