項目最終效果如下圖所示：

?

可以看出2個tab之間有一天分割線，這條分割線沒有使用單獨的div或者span。而是使用li標簽的border-right。但是最后一個需要隱藏，否則效果不是很理想。

最原始的寫法是：

1: #tabnav li:last-child 2: { 3: border-right:none; 4: } 在常用的瀏覽器中測試都通過了。但是IE7/8中，此樣式不起作用。D右側(cè)的邊框還是會出現(xiàn)。我想了一下，那就給最后一個li加一個樣式： <li id="sub_nav_user" class="dcontent lastitem" ><a >D Content</a></li> ? lastitem是我們?yōu)樽詈笠粋€li標簽添加的類。然后給lastitem添加border-right:none。以為大功告成，但是忘了項目還與權(quán)限有關(guān)。管理員可以看到以上A，B，C，D四個選項。但是普通用戶只能看到A和B2個選項。這下問題出來了，我不能直接給B的border-right設(shè)置為none。后來想了一個方法就是給C選項設(shè)置border-left:1px solid #6655cc。但是樣式需重調(diào)，這樣顯得有點麻煩。既然last-child是針對最后一個元素進行樣式設(shè)定的，那么我們可以通過jQuery達到同樣的效果。也不需要給最后一個li添加lastitem的樣式了。代碼如下： $("#tabnav li:last").addClass("lastitem"); ? 樣式如下: #tabnav .lastitem { border-right:none; }

?

這樣當然不是最好的做法。但是我們有時需要轉(zhuǎn)變思路，這樣有時可以達到事半功倍的效果。

總結(jié)

以上是生活随笔為你收集整理的让IE7/8使用CSS中first-child和last-child样式属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。