【CSS3】选择器对第几个元素添加不同样式的方法

admin

:only-child                    p:only-child                      选择属于其父元素的唯一子元素的每个 <p> 元素。        
:nth-child(n)                 p:nth-child(2)                  选择属于其父元素的第二个子元素的每个 <p> 元素。        
:nth-last-child(n)           p:nth-last-child(2)            同上，从最后一个子元素开始计数。        
:nth-of-type(n)              p:nth-of-type(2)              选择属于其父元素第二个 <p> 元素的每个 <p> 元素。        
:nth-last-of-type(n)        p:nth-last-of-type(2)        同上，但是从最后一个子元素开始计数。        
:last-child                      p:last-child                       选择属于其父元素最后一个子元素每个 <p> 元素。        
: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>