关于 first-child 和 last-child 的用途我想就不用多说了吧，做导航、列表类的东东时，想让第一个或最后一个样式区别于其它中间的各个导航，比如字体、间距、背景……这时自然就会想到这两个伪类选择符。
在这里我是想做一个图片展示，一行三张图片，各图片间距 55px，就版式需要而言，第一个图片这个 margin-left:55px; 是肯定不行的，实际需要它零距离抵边。以往的话，就是直接在第一个图片的容器标签上直接加个 margin-left:0; 的样式。但假使这里不是一行，而是多行的话，是不是就太繁琐了？后台程序写循环时又得多做一次无谓的判断。所以，就要用到 first-child 了。
a { margin-left: 55px; } /*我的图片是放在A标签里的*/
a:first-child { margin-left: 0; }
效果实现。但问题也接着来了，IE6 是不支持 first-child 标签的。怎么办呢？为了不给后台添麻烦，那就得前台麻烦了。搜索一下，看网友 Realazy 是用 JS 来判断，加上选择符判断后，单为 IE6 遍历出所有标签，然后在第一个标签上加样式。不过，他是用的 ul 标签遍历出其中的 li，可我这里是把 a 放在了一个 div 里，形如：
<div class="pics">
<a href="#"><img src="a.jpg" /></a>
<a href="#"><img src="b.jpg" /></a>
<a href="#"><img src="c.jpg" /></a>
</div>
所以，在加上样式
a.first-child { margin-left: 0; }
后，还不得不改动一下 JS 代码：
<script type="text/javascript">
document.getElementsByClassName = function(eleClassName) {
var getEleClass = [];
var myclass = new RegExp("\\b" + eleClassName + "\\b");
var elem = this.getElementsByTagName("*");
for (var h = 0; h < elem.length; h++) {
var classes = elem[h].className;
if (myclass.test(classes)) getEleClass.push(elem[h]);
}
return getEleClass;
}
function addClassName(tag, classname) {
tag.setAttribute("className", classname);
}
if (document.all && !window.opera) {
window.onload = function() {
var div = document.getElementsByClassName("pics");
for (var i = 0; i < div.length; i++) {
addClassName(div[i].getElementsByTagName("a")["0"], "first-child");
}
}
}
</script>
OK搞定，效果实现！
但是，后来细想，就为这么一个效果，写出这么多代码也太费油了吧？再由 JS 联想到 CSS 的 expression。略一搜索，果真有办法。单为 IE6 弄个样式：
a { * margin-left: expression(this.previousSibling==null?’0′:’55px’); }
一句话搞定！如果这里不是 first-child 而是 last-child，想改变最后一个标签的样式怎么呢？简单，将样式中的 previousSibling 替换成 nextSibling 就得了。
呵呵，和上面代码种种同为 JS 原理各一，但后者就一句话而已，是不是超简单呢？
PS：关于 CSS 中的 Expression
IE5 及其以后版本支持在 CSS 中使用 expression，用来把 CSS 属性和 Javas cript 表达式关联起来，这里的 CSS 属性可以是元素固有的属性，也可以是自定义属性。就是说 CSS 属性后面可以是一段Javas cript表达式，CSS属性的值等于 Javas cript 表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。 更多……
