CSS 使用 last-child 选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1293369/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using the last-child selector
提问by Miral
My goal is to apply the CSS on the last li, but it doesn't do that.
我的目标是在 last 上应用 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>How can I select onlythe last child?
如何只选择最后一个孩子？
回答by VoteyDisciple
The :last-childpseudoclass still cannot be reliably used across browsers. In particular, Internet Explorer versions < 9, and Safari < 3.2 definitely don't support it, although Internet Explorer 7 and Safari 3.2 dosupport :first-child, curiously.
该:last-child伪类仍然无法可靠地跨浏览器使用。特别是，Internet Explorer 版本 < 9 和 Safari < 3.2 绝对不支持它，虽然 Internet Explorer 7 和 Safari 3.2 确实支持:first-child，奇怪的是。
Your best bet is to explicitly add a last-child(or similar) class to that item, and apply li.last-childinstead.
最好的办法是明确last-child地向该项目添加一个（或类似的）类，然后应用li.last-child。
回答by Branden Silva
Another solution that might work for you is to reverse the relationship. So you would set the border for all list items. You would then use first-child to eliminate the border for the first item. The first-child is statically supported in all browsers (meaning it can't be added dynamically through other code, but first-child is a CSS2 selector, whereas last-child was added in the CSS3 specification)
另一个可能对您有用的解决方案是反转关系。因此，您将为所有列表项设置边框。然后，您将使用 first-child 消除第一项的边框。所有浏览器都静态支持 first-child（意味着它不能通过其他代码动态添加，但 first-child 是 CSS2 选择器，而 last-child 是在 CSS3 规范中添加的）
Note: This only works the way you intended if you only have 2 items in the list like your example. Any 3rd item and on will have borders applied to them.
注意：如果列表中只有 2 个项目，就像您的示例一样，这只会按照您的预期工作。任何第 3 项及以后的项目都将应用边框。
回答by Tarik
If you think you can use Javascript, then since jQuery support last-child, you can use jQuery's css method and the good thing it will support almost all the browsers
如果你认为你可以使用 Javascript，那么既然 jQuery 支持last-child，你可以使用 jQuery 的 css 方法，好处是它几乎支持所有浏览器
Example Code:
示例代码：
$(function(){
$("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})
You can find more info about here : http://api.jquery.com/css/#css2
你可以在这里找到更多信息：http: //api.jquery.com/css/#css2
回答by ccpizza
If the number of list items is fixed you can use the adjacent selector, e.g. if you only have three <li>elements, you can select the last <li>with:
如果列表项的数量是固定的，您可以使用相邻的选择器，例如，如果您只有三个<li>元素，您可以选择最后一个<li>：
#nav li+li+li {
border-bottom: 1px solid #b5b5b5;
}
回答by nzifnab
If you find yourself frequently wanting CSS3 selectors, you can always use the selectivizr library on your site:
如果您发现自己经常需要 CSS3 选择器，您可以随时使用您网站上的 selectivizr 库：
It's a JS script that adds support for almost all of the CSS3 selectors to browsers that wouldn't otherwise support them.
这是一个 JS 脚本，它为浏览器添加了对几乎所有 CSS3 选择器的支持，否则浏览器将不支持它们。
Throw it into your <head>tag with an IE conditional:
<head>使用 IE 条件将其放入您的标签中：
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->
回答by rahul
last-child pseudo class does not work in IE
last-child 伪类在IE 中不起作用
CSS Compatibility and Internet Explorer
回答by lexx
As an alternative to using a class you could use a detailed list, setting the child dt elements to have one style and the child dd elements to have another. Your example would become:
作为使用类的替代方法，您可以使用详细列表，将子 dt 元素设置为一种样式，将子 dd 元素设置为另一种样式。你的例子会变成：
#refundReasonMenu #nav li:dd
{
border-bottom: 1px solid #b5b5b5;
}
html:
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>
Neither method is better than the other and it is just down to personal preference.
这两种方法都不比另一种更好，这只是取决于个人喜好。
回答by pork-chop
Why not apply the border to the bottom of the UL?
为什么不将边框应用到 UL 的底部？
#refundReasonMenu #nav ul
{
border-bottom: 1px solid #b5b5b5;
}
回答by Ozzy
If you are floating the elements you can reverse the order
如果您浮动元素，您可以颠倒顺序
i.e. float: right;instead of float: left;
即float: right;代替float: left;
And then use this method to select the first-child of a class.
然后使用此方法选择类的第一个孩子。
/* 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;
}
This is actually applying the class to the LAST instance only because it's now in reversed order.
这实际上只是将类应用于 LAST 实例，因为它现在处于相反的顺序。
Here is a working example for you:
这是一个适合您的工作示例：
<!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>
回答by ecollis6
Another way to do it is using the last-child selector in jQuery and then use the .css() method. Be weary though because some people are still in the stone age using JavaScript disabled browsers.
另一种方法是在 jQuery 中使用 last-child 选择器，然后使用 .css() 方法。不过要感到疲倦，因为有些人仍然在使用禁用 JavaScript 的浏览器的石器时代。
