CSS 特异性：最后一个孩子

发布于 2024-08-09 21:36:58 字数 203 浏览 6 评论 0原文

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

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

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

有什么想法为什么这不起作用吗？

原文

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:

#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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

听你说爱我 2024-08-16 21:36:59

如果您想要最后一个链接位于最后一个中（假设链接位于li元素内），那么这就是您想要的：

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

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

还没有尝试过，但我想这会起作用。

If you want the last link in the last ul (assuming the link is inside a li-element), this is what you want:

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

#menu returns the menu element.
ul:last-child returns the last ul within #menu
li:last-child returns the last li within that ul

Haven't tried it, but i guess this would work.

回复收藏 0 原文

探春 2024-08-16 21:36:59

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

I'm only guessing what your HTML is, but:

<!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>

回复收藏 0 原文