CSS特异性：last-child答案

【问题标题】：Css specificity :last-childCSS特异性：last-child
【发布时间】：2010-12-13 02:09:54
【问题描述】：

我想使用以下内容来定位我的 div 中最后一个 ul 的最后一个链接 (a)。所以我想到了这个：

#menu ul:last-child li a {
       /*.....*/
}

我无法手动向该元素添加一个类，即使我想动态添加，我仍然必须以上述方式定位元素。

任何想法为什么这不起作用？

【问题讨论】：

如果你能提供 HTML 样本就好了
对不起，我应该附上一个，但我只是需要想法......无论如何，由于某些莫名其妙的原因，我的浏览器似乎都没有响应：last-child 或 :first-child。我刚刚让它在 jQuery 中工作： $('#menu ul li a:last').css({});

标签： css css-specificity css-selectors

【解决方案1】：

我只是猜测你的 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>

【讨论】：

【解决方案2】：

如果你想要 last ul 中的 last 链接（假设链接在 li-元素内），这就是你想要的：

#menu ul:last-child li:last-child a {
       /*.....*/
}

#menu 返回菜单元素。
ul:last-child 返回 #menu 内的最后一个 ul
li:last-child 返回该 ul 中的最后一个 li

没试过，但我想这会奏效。

【讨论】：

它工作......但只是一个疑问，关于你的解释......不是这样......#menu ul选择#menu中的所有uls; :last-child li 选择所有菜单 uls 中的最后一个 li；和 :last-child a 选择最后一个 li 中的最后一个链接？我只是将它用于水平导航，最后一个 li 没有子菜单 ul，它选择了那个特定的 li.......
正是我需要的 +1

【解决方案3】：

我已经在 safari (4.0.3) 和 firefox(3.5.4) 中测试了你的代码，一切正常，我不知道在 IE8 中！

考虑一下，这是 CSS3 标准中定义的新伪类（选择器），并非所有浏览器都完全支持，最旧的浏览器也不支持！

作为一般规则，出于性能原因，我建议您避免使用超过 2 级的 CSS 指令（如果您真的需要，最多 3 级）！

但是，我认为如果您不想将样式直接应用于标记元素，则必须找到 javascript 解决方案！

【讨论】：

【解决方案4】：

CSS last-child 在 IE 中不起作用，包括 IE8。

它应该可以在所有其他当前浏览器中使用，但如果您打算在需要支持 IE 的网站上使用它，则需要找到一种替代方法。

此页面包含 CSS 选择器的完整列表，以及哪些浏览器支持它们： http://quirksmode.org/css/contents.html

【讨论】：

:last-child 在 IE 9 及更高版本中工作。 :first-child 从 IE7 开始工作。
@Dima 你是对的。请记住，发布此答案时 IE9 尚未发布。
当然，答案是在 7 年前发布的。这只是一个更新。