使用最后一个孩子select器
我的目标是在最后一次应用CSS，但是不这样做。
#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>
我怎样才能只select最后一个孩子？
:last-child伪类仍然不能在各种浏览器中可靠地使用。 尤其是，Internet Explorer版本<9和Safari <3.2绝对不支持它 ，尽pipeInternet Explorer 7和Safari 3.2 确实支持:first-child ，好奇。
你最好的办法是明确地为这个项目添加一个last-child （或者类似的）类，然后应用li.last-child 。
另一个可能适合你的解决scheme是扭转关系。 所以你可以设置所有列表项目的边框。 然后，您将使用第一个孩子消除第一个项目的边界。 第一个孩子在所有浏览器中都是静态支持的（这意味着它不能通过其他代码dynamic添加，但是第一个孩子是CSS2select器，而最后一个孩子是在CSS3规范中添加的）
注意：如果您的示例中只有列表中的2个项目，则这只能按照您的预期方式工作。 任何第三个项目都将应用边界。
如果你认为你可以使用Javascript，那么既然jQuery支持last-child ，你可以使用jQuery的css方法，它将支持几乎所有的浏览器
示例代码：
$(function(){ $("#nav li:last-child").css("border-bottom","1px solid #b5b5b5") })
你可以在这里find更多的信息： http : //api.jquery.com/css/#css2
如果列表项的数量是固定的，你可以使用相邻的select器，例如，如果你只有三个<li>元素，你可以select最后一个<li> ：
#nav li+li+li { border-bottom: 1px solid #b5b5b5; }
如果您发现自己经常需要CSS3select器，则可以始终在您的网站上使用selectivizr库：
这是一个JS脚本，它将几乎所有的CSS3select器都支持到不支持它们的浏览器。
把它放到你的<head>标签中，使用IE条件：
<!--[if (gte IE 6)&(lte IE 8)]> <script src="/js/selectivizr-min.js" type="text/javascript"></script> <![endif]-->
最后一个子类伪类在IE中不起作用
CSS兼容性和Internet Explorer
IE7的CSSselect器：他们如何失败
作为使用类的替代方法，您可以使用详细列表，将dt子元素设置为具有一种样式，而将dd元素设置为具有另一种样式。 你的例子会变成：
#refundReasonMenu #nav li:dd { border-bottom: 1px solid #b5b5b5; }
HTML：
<div id="refundReasonMenu"> <dl id="nav"> <dt><a id="abc" href="#">abcde</a></dt> <dd><a id="def" href="#">xyz</a></dd> </dl> </div>
这两种方法都不如其他方法好，只是个人喜好而已。
另一种方法是使用jQuery中的最后一个子select器，然后使用.css（）方法。 疲惫不堪，因为有些人还在使用JavaScript禁用浏览器的石器时代。
为什么不把边界应用到UL的底部？
#refundReasonMenu #nav ul { border-bottom: 1px solid #b5b5b5; }
如果您要浮动元素，则可以颠倒顺序
即float: right; 而不是float: left;
然后用这个方法select一个类的第一个孩子。
/* 1: Apply style to ALL instances */ #header .some-class { padding-right: 0; } /* 2: Remove style from ALL instances except FIRST instance */ #header .some-class~.some-class { padding-right: 20px; }
这实际上是将类应用到LAST实例，因为它现在是相反的顺序。
这是你的一个工作示例：
<!doctype html> <head><title>CSS Test</title> <style type="text/css"> .some-class { margin: 0; padding: 0 20px; list-style-type: square; } .lfloat { float: left; display: block; } .rfloat { float: right; display: block; } /* apply style to last instance only */ #header .some-class { border: 1px solid red; padding-right: 0; } #header .some-class~.some-class { border: 0; padding-right: 20px; } </style> </head> <body> <div id="header"> <img src="some_image" title="Logo" class="lfloat no-border"/> <ul class="some-class rfloat"> <li>List 1-1</li> <li>List 1-2</li> <li>List 1-3</li> </ul> <ul class="some-class rfloat"> <li>List 2-1</li> <li>List 2-2</li> <li>List 2-3</li> </ul> <ul class="some-class rfloat"> <li>List 3-1</li> <li>List 3-2</li> <li>List 3-3</li> </ul> <img src="some_other_img" title="Icon" class="rfloat no-border"/> </div> </body> </html>
很难说，没有看到你的CSS的其余部分，但尝试添加!important的边界颜色，使之如此：
#refundReasonMenu #nav li:last-child { border-bottom: 1px solid #b5b5b5 !important; }
