問(wèn)題描述

我知道可以通過(guò)給最后一個(gè)添加class，但是這個(gè)是所有瀏覽器下都添加class，那last-child不用都可以了。

這問(wèn)題應(yīng)該放在新手下面的，但習(xí)慣性直接在首頁(yè)撰寫，所以...

開始我是有找下解決的方法。一般last-child都是用在菜單或者列表用邊框分隔的時(shí)候，把最后面一個(gè)border的設(shè)定去掉。

一種方法是給最后一項(xiàng)添加一個(gè)class，例如.last-child，把border設(shè)為none值。（這個(gè)不便于數(shù)據(jù)綁定，不然又得判斷最后一個(gè)，麻煩）。

一種方法是通過(guò)js把最后最后一項(xiàng)的邊框值去掉，達(dá)到last-child的目的：

if ($(’html’).hasClass(’lt-ie9’)) { $(’[data-fix-last-child]’).each(function () {var $me = $(this);var element = $me.data(’fix-last-child’);$me.find(element).last().css({ ’border’: ’none’,’background’: ’none’ }); });}

但是上面兩種方法都是所有瀏覽器下都生效，也就是不用last-child都可以了。當(dāng)然也可以判斷是IE678的時(shí)候才使用上面的方法，但沒(méi)什么必要。

還有一種方法是使用：

expression(this.nextSibling==null?’0’:’1px’);

沒(méi)試過(guò)，因?yàn)椴恢С諭E8。

問(wèn)題解答

僅僅是分隔的場(chǎng)景的話，可以用first-child啊，讓first-child沒(méi)有上／左邊框就好

有一種很簡(jiǎn)單的方法，純CSS實(shí)現(xiàn)，支持IE7。就是使用element+element即一個(gè)元素緊接著另一個(gè)元素選擇器。因?yàn)閘ast-child元素是沒(méi)有緊跟這的元素的，element+element為CSS2選擇器。舉個(gè)栗子：

<ul> <li>sample text</li> <li>sample text</li> <li>sample text</li> <li>sample text</li> <li>sample text</li> <li>sample text</li></ul>

我們希望在每條記錄之間加上分隔符，一般會(huì)加border-bottom屬性，但是最后一個(gè)<li>下面不能有，我們可以使用li+li選擇符，改用border-top屬性即可實(shí)現(xiàn)。

li+li{border-top: 1px dotted #999;}

效果圖：

如果你的基本目的是去掉列表項(xiàng)目的最后一個(gè)的border，比如想去掉list item最后一個(gè)的border-right，其實(shí)可以將每個(gè)list item的border設(shè)定成border-left，然后給每個(gè)list item添加margin-left：- border寬度就可以了。

這是margin負(fù)邊距布局常用的方法之一

參見資料

負(fù)值之美：負(fù)值在頁(yè)面布局中的應(yīng)用

CSS布局奇淫巧計(jì)之-強(qiáng)大的負(fù)邊距

我公司只要兼容ie10以上就行（雖然老板說(shuō)ie6..）

/** HTML */<ul class='element'> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li></ul>/** CSS */.element:last-child,.element.last-child{ ... }/** JS */if( IE6 || IE7 || ... ) { $(’.element’).children(’li:last-child’).addClass(’.last-child’);}回答6：

我記得ie678就不支持這個(gè)偽類last-child，這是css3里面的

使用 JS 獲得上級(jí)元素 UL ol 然后再給最后一個(gè)元素加樣式

ixiaohei 說(shuō)的對(duì)，ie6 不支持css3，所以想通過(guò)css是無(wú)法解決的。題外話，現(xiàn)在很少人寫ie6兼容了吧，就算寫了，也是閹割版。

如果是為了做菜單列表分割的話，不妨考慮用左邊框border-left，這樣會(huì)導(dǎo)致第一個(gè)元素的左邊框是多余的，但是因?yàn)樗械臑g覽器都支持first-child偽類的，所以你可以用first-child來(lái)設(shè)置第一個(gè)元素的border-left為none。以此來(lái)達(dá)到你想要的效果。

還是用ie的html條件注釋吧，在ie678的時(shí)候使用你寫的那段js。