让IE7/8使用CSS中first-child和last-child样式属性

项目最终效果如下图所示：

 

可以看出2个tab之间有一天分割线，这条分割线没有使用单独的div或者span。而是使用li标签的border-right。但是最后一个需要隐藏，否则效果不是很理想。

最原始的写法是：

   1:  #tabnav li:last-child

   2:  {

   3:  border-right:none;

   4:  }

在常用的浏览器中测试都通过了。但是IE7/8中，此样式不起作用。D右侧的边框还是会出现。我想了一下，那就给最后一个li加一个样式：

<li id="sub_nav_user" class="dcontent lastitem" ><a >D Content</a></li>

lastitem是我们为最后一个li标签添加的类。然后给lastitem添加border-right:none。以为大功告成，但是忘了项目还与权限有关。管理员可以看到以上A，B，C，D四个选项。但是普通用户只能看到A和B2个选项。这下问题出来了，我不能直接给B的border-right设置为none。后来想了一个方法就是给C选项设置border-left:1px solid #6655cc。但是样式需重调，这样显得有点麻烦。既然last-child是针对最后一个元素进行样式设定的，那么我们可以通过jQuery达到同样的效果。也不需要给最后一个li添加lastitem的样式了。代码如下：

$("#tabnav li:last").addClass("lastitem");

样式如下:

#tabnav .lastitem

{

border-right:none;

}

 

这样当然不是最好的做法。但是我们有时需要转变思路，这样有时可以达到事半功倍的效果。