css - 在IE678下用什么方法解决伪类last-child？

Question

我知道可以通过给最后一个添加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。

Answer 1

If it is just a separated scene, you can use first-child, so that first-child does not have top/left borders

Answer 2

There is a very simple method, implemented in pure CSS, supporting IE7.
is to use element element which is an element followed by another element selector. Because the last-child element does not follow this element, element element is a CSS2 selector.
Give me an example:

<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>

We want to add a separator between each record. We usually add the border-bottom attribute, but the last <li> cannot be below it. We can use the li li selector and use the border-top attribute instead. Achievable.

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

Rendering:

Answer 3

If your basic purpose is to remove the border from the last list item, for example, if you want to remove the border-right from the last list item, you can actually change the Set the border to border-left, and then add margin-left to each list item: - Border width is fine.

This is one of the commonly used methods of negative marginlayout

See information

The Beauty of Negative Values: Application of Negative Values ​​in Page Layout

CSS layout tricks - powerful negative margins

Answer 4

As long as our company is compatible with IE10 or above (although the boss said IE6...)

Answer 5

/** 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');
}

Answer 6

I remember that ie678 does not support this pseudo-class last-child, which is in CSS3

Answer 7

Use JS to get the superior element UL ol and then add styles to the last element

Answer 8

ixiaohei is right, ie6 does not support css3, so it cannot be solved through css.
As an aside, few people write about ie6 compatibility now, and even if they do, it is a castrated version.

Answer 9

If you are doing menu list segmentation, you may wish to consider using the left border border-left. This will cause the left border of the first element to be redundant, but because all browsers support the first-child pseudo-class, So you can use first-child to set the border-left of the first element to none. Use this to achieve the effect you want.

Answer 10

It’s better to use ie’s html conditional comments. In ie678, use the js you wrote.