使用最后一个选择器

Question

我的目标是在最后一个CSS上使用CSS li，但是这样做不是。

#refundReasonMenu #nav li:last-child {

    border-bottom: 1px solid #b5b5b5;

}

<div id="refundReasonMenu">

    <ul id="nav">

    <li><a id="abc" href="#">abcde</a></li>

    <li><a id="def" href="#">xyz</a></li>

    </ul>

    </div>

如何只选择最后一个孩子？

Answer 1

该:last-child伪类仍然无法可靠地跨浏览器使用。特别是，Internet Explorer <9和Safari <3.2绝对不支持它，尽管Internet Explorer 7和Safari 3.2 确实支持:first-child。最好的选择是last-child向该项目显式添加一个（或类似的）类，然后应用li.last-child。

Answer 2

另一种可能对您有用的解决方案是逆转关系。因此，您将为所有列表项设置边框。然后，您将使用第一个孩子消除第一个项目的边框。所有浏览器均静态支持第一个孩子（这意味着无法通过其他代码动态添加第一个孩子，但是第一个孩子是CSS2选择器，而在CSS3规范中添加了最后一个孩子）注意：仅当列表中只有2个项目（例如您的示例）时，这才可以按预期方式工作。任何第3个项目及以上项目都将应用边框。

Answer 3

如果您认为可以使用Javascript，那么由于有了jQuery支持last-child，因此可以使用jQuery的css方法，它的优点是它将支持几乎所有浏览器示例代码：$(function(){&nbsp; &nbsp;$("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")})您可以在此处找到更多信息：http : //api.jquery.com/css/#css2