項目最終效果如下圖所示：
可以看出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;
}
這樣當然不是最好的做法。但是我們有時需要轉變思路，這樣有時可以達到事半功倍的效果。