Question

我想使用以下内容来定位我div中最后一个ul的最后一个链接（a）。所以这就是我想到的：

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

我无法手动为该元素添加一个类，即使我想动态地执行它，我仍然需要以上述方式定位元素。

为什么这不起作用？

Answer 1

如果你想要 last ul 中的最后一个链接（假设链接在li - 元素内），这就是你想要的：< / p>

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

#menu返回菜单元素。
ul:last-child返回ul

#menu

li:last-child会返回li

ul

没试过，但我想这会有用。

Answer 2

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

Answer 3

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

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

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

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

Answer 4

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

它应该可以在所有其他当前浏览器中使用，但是如果您计划在需要支持IE的网站上使用它，您将需要找到另一种方法来实现它。

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

Css特异性：最后一个孩子

4 个答案: