在展示一个循环列表时,经常会遇到这种情况:第一个元素或在换行临界点的元素通常需要与其他元素的样式进行区分,如margin或padding设置元素间距离时,处在同一行靠两边的元素通常需要清除其外侧的边距,在css2.1时代,通常的做法是利用后端程序语言,如php,判断当前是第几个元素.然后给在同一行靠两边的元素加上特定的样式声明.
但在Css3.0时代,且当前大多数主流的浏览器都已支持Css3,特别是移动端浏览器都已支持css3的情况下,可以借助Css3中的伪类选择器,在无需动态语言的情况下来快速实现这一效果.
1,first-child
指定元素列表中第一个元素的样式.语法如下:

li:first-child{
        margin-left:0px;
}

2,last-child
和first-child是同类型的选择器.last-child指定元素列表中最后一个元素的样式.语法如下:

li:last-child{
        margin-right:0px;
}

3,nth-child和nth-last-child
nth-child和nth-last-child可以指定某个元素的样式或从后数起某个元素的样式.
例如:

//指定第2个li元素
li:nth-child(2){}
//指定倒数第2个元素
li:nth-last-child{}
//指定偶数个li元素
li:nth-child(even){}
//指定奇数个li元素
li:nth-child(odd){}