您當(dāng)前位置：首頁 > web前端 > htmlcss > CSS3 nth-child 偽類的用法

CSS3 nth-child 偽類的用法

來源：程序員人生發(fā)布時(shí)間：2013-10-19 22:57:17 閱讀次數(shù)：3985次

CSS3提供了強(qiáng)大的偽類（pseudo-class）選擇器，使開發(fā)者能選擇某一對象中符合特定條件的元素進(jìn)行渲染。這些偽類在剛接觸的時(shí)候大家會覺得非常混亂，但當(dāng)掌握了以后能大大提高你的代碼效率，并且節(jié)省代碼量。今天先要說的是nth-child偽類。

nth-child偽類的定義

nth-child偽類在W3C里定義是選擇選擇父元素里的第n個(gè)子元素，可以使用an+b的形式選擇子元素，舉例用法如下：

tr:nth-child(2n+1) /* 選擇表格里的單數(shù)行 */
tr:nth-child(odd) /* 同上 */
tr:nth-child(2n) /* 選擇表格里的雙數(shù)行 */
tr:nth-child(even) /* 同上 */

聰明的看官大概已經(jīng)知道nth-child偽類可以用來干什么了。

CSS3 nth-child 偽類應(yīng)用實(shí)例 — 隔行變色列表

既然nth-child偽類能讓我們輕松第選擇容器里的某一個(gè)子元素，我們是不是可以用它來干點(diǎn)什么呢？需求最大的當(dāng)然是隔行變色的表格或者列表。我們這就去做一個(gè)隔行變色的列表看看。

首先確定列表的HTML結(jié)構(gòu)，我使用了做簡單的ul > li結(jié)構(gòu)，代碼如下

<ul>
<li> 項(xiàng)目一 </li>
<li> 項(xiàng)目二 </li>
<li> 項(xiàng)目三 </li>
<li> 項(xiàng)目四 </li>
<li> 項(xiàng)目五 </li>
<li> 項(xiàng)目六 </li>
<li> 項(xiàng)目七 </li>
</ul>

列表的結(jié)構(gòu)確定后，我們要做的是使ul里的七個(gè)li項(xiàng)根據(jù)單雙項(xiàng)的規(guī)則進(jìn)行隔行變色的處理。因此我們用nth-child(2n+1)或者nth-child(2n)進(jìn)行選擇都可以。我的CSS代碼如下：

ul li {
background: #9FF none repeat scroll 0 0;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding: 10px;
color: #000;
}
ul li:nth-child(2n+1) {
background: #6F9 none repeat scroll 0 0;
}

在這里我選擇了對列表的單數(shù)項(xiàng)進(jìn)行特殊渲染，下面是我做出來的效果，大家也可以看這個(gè)DEMO。
CSS3 nth-child 偽類效果