css - 定位最后一个列表项

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"}

那是行不通的，最重要的是，无论如何我都不想那样做，因为我不想影响页面其他地方的列表项内的其他 anchor

我还尝试了所有其他子字符串匹配属性选择器 ~、^、*...但这些都没有用...

我试过了

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

没有...

可能有一些我试过的东西我不记得了......

本质上我是想影响最后一个列表项的边界半径

为了确定，我什至验证了我的 HTML 和 CSS

我什么都没有……你呢？

Answer 1

你很接近..

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

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

jsFiddle demo - 它有效..

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