html - 如何使用:not selector in CSS?

Question

我的问题说明了一切。我是 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。

Answer 1

你的选择器错了，应该是

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

那是因为使用您的标记，<a>永远是其 <li> 的最后一个 child parent 。您想要的是将样式应用于 <a>在任何 <li> 内这不是最后一个 child 。