我知道可以通过给最后一个添加class,但是这个是所有浏览器下都添加class,那last-child不用都可以了。
这问题应该放在新手下面的,但习惯性直接在首页撰写,所以...
开始我是有找下解决的方法。
一般last-child
都是用在菜单或者列表用边框分隔的时候,把最后面一个border
的设定去掉。
一种方法是给最后一项添加一个class
,例如.last-child
,把border
设为none
值。(这个不便于数据绑定,不然又得判断最后一个,麻烦)。
一种方法是通过js把最后最后一项的边框值去掉,达到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
都可以了。当然也可以判断是IE678的时候才使用上面的方法,但没什么必要。
还有一种方法是使用:
expression(this.nextSibling==null?'0':'1px');
没试过,因为不支持IE8。
怪我咯2017-04-17 11:09:27
有一种很简单的方法,纯CSS实现,支持IE7。
就是使用element+element
即一个元素紧接着另一个元素选择器。因为last-child元素是没有紧跟这的元素的,element+element
为CSS2选择器。
举个栗子:
<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>
我们希望在每条记录之间加上分隔符,一般会加border-bottom属性,但是最后一个<li>
下面不能有,我们可以使用li+li
选择符,改用border-top
属性即可实现。
li+li{border-top: 1px dotted #999;}
效果图:
高洛峰2017-04-17 11:09:27
如果你的基本目的是去掉列表项目的最后一个的border,比如想去掉list item最后一个的border-right,其实可以将每个list item的border设定成border-left,然后给每个list item添加margin-left:- border宽度就可以了。
这是margin负边距布局常用的方法之一
参见资料
负值之美:负值在页面布局中的应用
CSS布局奇淫巧计之-强大的负边距
PHP中文网2017-04-17 11:09:27
/** 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');
}
巴扎黑2017-04-17 11:09:27
如果是为了做菜单列表分割的话,不妨考虑用左边框border-left,这样会导致第一个元素的左边框是多余的,但是因为所有的浏览器都支持first-child伪类的,所以你可以用first-child来设置第一个元素的border-left为none。以此来达到你想要的效果。