項(xiàng)目最終效果如下圖所示：

?

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

最原始的寫法是：

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

?

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

總結(jié)

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

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