CSS3的first-child选择器实战攻略

同样类型的选择器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 也可以这样去理解。

IE的兼容型问题
先看如下一段代码，HTML部分：

XML/HTML Code复制内容到剪贴板

<ul class="example">  
    <li>aa</li>  
    <li>bb</li>  
    <li>cc</li>  
    <li>dd</li>  
</ul>  

CSS部分：

CSS Code复制内容到剪贴板

.example li{float:left;margin-left:10px;}  

如果需要将第一个li的margin-left设为0px，则可以通过下面这个方法实现：

CSS Code复制内容到剪贴板

.example li{float:left;margin-left:10px;}   
.example li:first-child{margin-left:0;}  

然而，IE6不支持:child-first方法，因此我们需要使用表达式从来实现IE6也支持:child-first，代码如下：

CSS Code复制内容到剪贴板

.example li{float:left; margin-left:10px; _margin-left:expression(this.previousSibling==null?’0px’:’10px’);}   
.example li:first-child{margin-left:0;}  

当然，我们也可以给第一个li添加一个class来重新定义margin-left，如果说是静态页面这样做还可以，如果说程序需要循环输出li的话使用child-first会好些，至少可以使程序少做一条判断。