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

我正在使用您在上面看到的这个无序列表。最终，我试图将最后一个列表项“Contact”作为目标，以使其样式与其他项略有不同。现在要非常具体，这是我的 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 以确保

我什么都没有……你呢？

4

2 回答 2

1

你很接近..

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

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

jsFiddle 演示- 它有效..

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

于 2013-10-03T00:42:20.467 回答
0

尝试

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

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

#nav-items:last-child {
    property: "value";
}
于 2013-10-03T00:42:22.327 回答