2

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

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

我不能手动向那个元素添加一个类，即使我想动态地做，我仍然必须以上述方式定位元素。

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

4

4 回答 4

9

如果你想要最后一个 ul中的最后一个链接（假设链接在-element 内），这就是你想要的：li

#menu ul:last-child li:last-child a {
       /*.....*/
}
  • #menu返回菜单元素。
  • ul:last-child返回最后ul一个#menu
  • li:last-child返回其中的最后li一个ul

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

于 2009-11-04T18:50:28.003 回答
4

我只是猜测你的 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>
于 2009-11-04T16:33:31.440 回答
0

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

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

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

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

于 2009-11-04T18:50:51.700 回答
0

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

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

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

于 2010-11-03T23:51:42.737 回答