Mir*_*ral 106 css css-selectors
我的目标是在最后应用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>如何选择只有最后一个孩子？
Vot*_*ple 171
该:last-child伪类仍然无法可靠地跨浏览器使用.特别是,Internet Explorer版本<9和Safari <3.2绝对不支持它,尽管Internet Explorer 7和Safari 3.2 确实支持它:first-child.
您最好的选择是明确地last-child向该项添加(或类似)类,然后应用li.last-child.
Bra*_*lva 76
另一个可能对您有用的解决方案是扭转这种关系.因此,您将为所有列表项设置边框.然后,您将使用first-child来消除第一个项目的边框.在所有浏览器中静态支持第一个子节点(意味着它不能通过其他代码动态添加,但是first-child是CSS2选择器,而在CSS3规范中添加了last-child)
注意:如果列表中只有2个项目(如示例),则此方法仅适用于您的预期方式.任何第3项及其上都将应用边框.
Tar*_*rik 43
如果你认为你可以使用Javascript,那么从jQuery支持last-child,你可以使用jQuery的css方法,它会支持几乎所有的浏览器
示例代码:
$(function(){
$("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})
你可以在这里找到更多信息:http://api.jquery.com/css/#css2
ccp*_*zza 19
如果列表项的数量是固定的,您可以使用相邻的选择器,例如,如果您只有三个<li>元素,则可以选择最后一个<li>:
#nav li+li+li {
border-bottom: 1px solid #b5b5b5;
}
nzi*_*nab 13
如果您发现自己经常需要CSS3选择器,您可以随时使用您网站上的选择性库:
它是一个JS脚本,它将几乎所有CSS3选择器的支持添加到浏览器中,否则它们将无法支持它们.
<head>用IE条件将它扔进你的标签:
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->