CSS 特异性：last-child
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1674860/
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
Css specificity :last-child
提问by Turbodurso
I would like to use the following to target the last link (a) of the last ul inside my div. So this is what came to mind:
我想使用以下内容来定位 div 中最后一个 ul 的最后一个链接 (a)。于是想到了这个：
#menu ul:last-child li a {
/*.....*/
}
I cant manually add a class to that element, and even if i wanted to do it dynamically i would still have to target the element the above way.
我无法手动向该元素添加一个类，即使我想动态添加它，我仍然必须以上述方式定位该元素。
Any ideas why this is not working?
任何想法为什么这不起作用？
回答by Arve Systad
If you want the last linkin the last ul(assuming the link is inside a li-element), this is what you want:
如果您想要最后一个 ul中的最后一个链接（假设链接在 -li元素内），这就是您想要的：
#menu ul:last-child li:last-child a {
/*.....*/
}
#menureturns the menu element.ul:last-childreturns the lastulwithin#menuli:last-childreturns the lastliwithin thatul
#menu返回菜单元素。ul:last-child返回最后一个ul内#menuli:last-child返回最后一个li内ul
Haven't tried it, but i guess this would work.
没试过，但我想这会奏效。
回答by MiseryIndex
I'm only guessing what your HTML is, but:
我只是在猜测你的 HTML 是什么，但是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" >
div ul:last-child li:last-child a:last-child {
background-color: red;
}
</style>
</head>
<body>
<div>
<ul><li>First list</li></ul>
<ul><li>Second list</li></ul>
<ul>
<li>Item 1</li>
<li>
<a href="#">First Link</a>
<a href="#">Last Link</a>
</li>
</ul>
</div>
</body>
</html>
回答by BitDrink
I've tested your code in safari (4.0.3) and firefox(3.5.4) and all works fine, I don't know in IE8!
我已经在 safari (4.0.3) 和 firefox(3.5.4) 中测试了你的代码，一切正常，我不知道在 IE8 中！
Consider that this is a new pseudo-class (selector) defined in the CSS3 standard that is not completely supported from all browsers and is unsupported by the oldest browsers!
考虑到这是 CSS3 标准中定义的一个新的伪类（选择器），并非所有浏览器都完全支持，最旧的浏览器也不支持！
As general rule, for performance reasons, I suggest you to avoid CSS directives with more than 2 level (maximum 3 if you really need it)!
作为一般规则，出于性能原因，我建议您避免使用超过 2 级的 CSS 指令（如果您确实需要，最多 3 级）！
However, I think that if you don't want to apply the style directly to a tagged element, you have to find a javascript solution!
但是，我认为如果您不想将样式直接应用于标记元素，则必须找到 javascript 解决方案！
回答by Spudley
CSS last-childdoes not work in IE, including IE8.
CSSlast-child在 IE 中不起作用，包括 IE8。
It should work in all other current browsers, but if you're planning to use it on a site which needs to support IE, you'll need to work out an alternative way to do it.
它应该适用于所有其他当前浏览器，但是如果您打算在需要支持 IE 的站点上使用它，则需要找到一种替代方法来做到这一点。
This page has a full list of CSS selectors, and which browsers support them: http://quirksmode.org/css/contents.html
这个页面有一个完整的 CSS 选择器列表，以及支持它们的浏览器：http: //quirksmode.org/css/contents.html
