关于 first-child 和 last-child 的用途我想就不用多说了吧,做导航、列表类的东东时,想让第一个或最后一个样式区别于其它中间的各个元素,比如字体、间距、背景……这时自然就会想到这两个伪类选择符。
在这里我是想做一个图片展示,一行三张图片,各图片间距 55px,就版式需要而言,第一个图片这个 margin-left:55px; 是肯定不行的,实际需要它零距离抵边。以往的话,就是直接在第一个图片的容器标签上直接加个 margin-left:0; 的样式。但假使这里不是一行,而是多行的话,是不是就太繁琐了?后台程序写循环时又得多做一次无谓的判断。所以,就要用到 first-child 了。
a:first-child { margin-left: 0; }
效果实现。但问题也接着来了,IE6 是不支持 first-child 标签的。怎么办呢?为了不给后台添麻烦,那就得前台麻烦了。搜索一下,看网友 Realazy 是用 JS 来判断,加上选择符判断后,单为 IE6 遍历出所有标签,然后在第一个标签上加样式。不过,他是用的 ul 标签遍历出其中的 li,可我这里是把 a 放在了一个 div 里,形如:


