以最后一个列表项为目标

Question

<ul id="nav-items" class="links">
                            <li><a href="http://www.thevoiceofjeremydonahue.com/about">About</a></li>
                            <li><a href="http://www.thevoiceofjeremydonahue.com/projects">Projects</a></li>
                            <li><a href="http://www.thevoiceofjeremydonahue.com/contact">Contact</a></li>
                        </ul>

我正在使用您在上面看到的这个无序列表。 最终，我尝试针对最后一个列表项"联系人"，以便将其样式与其他列表项略有不同。 现在非常具体地说，这就是我的 css 到目前为止对这个特定列表的外观：

#nav-items {
    border: 2px solid white;
    background: rgb(255, 75, 0);
    border-radius: 10% 10% 80% 80%;
    position: absolute;
    top: 10px;
    right: 10px;
    margin-right: 1px;
    font-family: 'Libre Baskerville', serif;
    font-size: 40px;
}

#nav-items > li {
    margin-bottom: 60px;
    margin-right: 58px;
    margin-top: 40px;
    text-align: center;
    background: black;
    padding: 15px;
    border: 2px solid white;
}
#nav-items > li a:hover {
    color: white;
    border-radius: 50%; /*This one (border-radius) isn't working either*/
}

现在，为了瞄准最后一个，我的第一选择是选择。

a[href$="contact"] {
     property: "value";
}

但这没有用...所以我试了

#nav-items:last-child {
     property: "value";
}

我什至试过

ul li a {property: "value"}

这不起作用，最重要的是，无论如何我都不想这样做，因为我在页面上其他地方的列表项内还有其他锚点，我不想受到影响

我还尝试了所有其他子字符串匹配属性选择器 ~， ^， *...这些也都不起作用...

我试过了

#nav-items > li a {property: "value"}

无。。。

可能我尝试过一些我不记得的事情......

本质上，我试图影响最后一个列表项的边框半径

我什至已经验证了我的HTML和CSS，以确保

我什么都没有...你？

Answer 1

你很接近..

你必须告诉它选择最后一个li，而不是最后一个#nav-item - 只有一个。

#nav-items li:last-child {
     property: "value";
}

jsFiddle演示 - 它可以工作。

此外，您不希望#nav-items li a:last-child {} - 请注意a..因为这将选择最后一个a - 而不是最后一个li。在上下文中，无论如何都没有彼此旁边的a元素。

Answer 2

尝试使用

#nav-items li a:last-child {
    property: "value";
}

CSS 最后一个子

选择器检查应用它的元素是否是其父元素的最后一个子元素。这就是为什么您以前的代码没有按预期工作的原因：

#nav-items:last-child {
    property: "value";
}