CSS3 nth-child 偽類的用法

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

nth-child偽類的定義

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

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

CSS3 nth-child 偽類應用實例 — 隔行變色列表

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

首先確定列表的HTML結構，我使用了做簡單的ul > li結構，代碼如下

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

在這里我選擇了對列表的單數項進行特殊渲染，下面是我做出來的效果，大家也可以看這個DEMO。

nth-child偽類的衍生

除了nth-child以外，W3C還為我們提供了幾個基于nth-child定義的衍生偽類，這里簡單地說說他們的用途。

• E:nth-last-child(n): 選擇某個子元素，從最后一個數起
• E:nth-of-type(n): 選擇某個某種類型的子元素
• E:nth-last-of-type(n): 選擇某個某種類型的子元素，從最后一個符合條件的元素數起
• E:first-child: 選擇第一個子元素（這個偽類在CSS2里就有）
• E:last-child: 選擇最后一個子元素

nth-child偽類的家族里，除了E:first-child外，其他的偽類都只能在支持CSS3的瀏覽器里起作用，也就是說在目前的IE里是看不到效果的。

出處：http://blog.imbolo.com/css3-nth-child-pseudo-class/

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈