如何在 CSS 中使用 :not 选择器？答案

【问题标题】：How to use :not selector in CSS?如何在 CSS 中使用 :not 选择器？
【发布时间】：2012-05-06 00:42:27
【问题描述】：

我的问题说明了一切。我是 CSS 新手。我正在尝试使用以下代码，但它不起作用：

ul.verticalNav {
    /*declaration*/
}

ul.verticalNav li {
    /*declaration*/
}

ul.verticalNav li a {
    /*declaration*/
}

ul.verticalNav li a:not(:nth-last-child(1)) {
    border-bottom: 1px solid #323232;
}

ul.verticalNav li a:not(:nth-last-child(1)) 类没有创建边框。 HTML 是：

<ul class="verticalNav">
    <li><a href="#">Home</a></li>
    <li><a href="#">View Profile</a></li>
    <li><a href="#">Edit Profile</a></li>
    <li class="bottomLeftMenuItem"><a class="bottomLeftMenuItem" href="#">Search Profile</a></li>
</ul>

我找不到问题。

提前致谢。

我使用的是 Firefox 12.0 和 Google Chrome 18.0.1025.168 m。

【问题讨论】：

你可以用:last-child替换:nth-last-child(1)

标签： html css css-selectors

【解决方案1】：

你的选择器错了，应该是

ul.verticalNav li:not(:nth-last-child(1)) a {
    border-bottom: 1px solid #323232;
}

那是因为有了您的标记，<a> 将始终是其 <li> 父级的最后一个子级。您想要的是将样式应用于<a>s 内的任何<li>，这不是最后一个孩子。

【讨论】：

太好了，非常感谢你的解释，它帮助我理解了标签的顺序和关系。