项目最终效果如下图所示：
可以看出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;
}
这样当然不是最好的做法。但是我们有时需要转变思路，这样有时可以达到事半功倍的效果。
