用css3選擇器給你要的第幾個元素添加不同樣式方法【轉發】

下面我們來了解一下css選擇器里面的幾個

:only-child	p:only-child	選擇屬於其父元素的唯一子元素的每個 <p> 元素。	3
:nth-child(n)	p:nth-child(2)	選擇屬於其父元素的第二個子元素的每個 <p> 元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，從最后一個子元素開始計數。	3
:nth-of-type(n)	p:nth-of-type(2)	選擇屬於其父元素第二個 <p> 元素的每個 <p> 元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是從最后一個子元素開始計數。	3
:last-child	p:last-child	選擇屬於其父元素最后一個子元素每個 <p> 元素。	3
:first-child	p:first-child	選擇屬於父元素的第一個子元素的每個 <p> 元素。

我們可以使用 :nth-child(n)  來自動判斷第4個
css代碼如下

<style>
.list li:nth-child(4n){ border-bottom:1px dashed #ccc;} /*4n就是4的倍數都加這個樣式*/
</style>