nth-child(n)-CSS屬性介紹

網頁設計簡單做

如果想要單數列一種背景、雙數列一種背景
或是單數和雙數的設定屬性不同
除了分別設定class之外
也可以直接使用CSS裡 nth-child(n) 這屬性
其中的(n)是關鍵字元
只要把n改成
(odd) 就會是單數選取
(even)就是雙數選取
以下是範例
html範例:

<nav class="text-box">
<ul>
<li>text1</li>
</ul>
<ul>
<li>text2</li>
</ul>
<ul>
<li>text3</li>
</ul>
<ul>
<li>text4</li>
</ul>
</nav>

css範例:

.text-box ul li{ /*設定所有li的背景為白色*/ 
backgroun-color:#FFF;
}
.text-box ul li:nth-child(odd){ /*設訂單數li的背景為橘色*/
background-color:#eb6100;
}

這樣就會只有單數背景是橘色背景
雙數的會是白色背景
當然也可以在裡面設定其他屬性,來增加差異度