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 demo - 它有效..

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

Answer 2

尝试

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

CSS last-child 选择器检查应用它的元素是否是其父元素的最后一个子元素。这就是您以前的代码无法正常工作的原因：

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

定位最后一个列表项

2 个答案: