小虾虎鱼

小虾虎鱼

CSS选择首个子对象的方法(:first-child)

作者 禾惠 发表于 2012/07/21,最后修改于 2012/07/21

先看如下一段代码,HTML部分:

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

CSS部分:

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

如果需要将第一个limargin-left设为0px,则可以通过下面这个方法实现:

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

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

.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会好些,至少可以使程序少做一条判断。


穗溪原创,转载请注明 来自于小虾虎鱼 http://www.xiaoboy.com