<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
我什么都没有……你呢?
最佳答案
你很接近..
您实际上必须告诉它选择最后一个 li
,而不是最后一个 #nav-item
- 只有一个。
#nav-items li:last-child {
property: "value";
}
jsFiddle demo - 它有效..
此外,您不需要 #nav-items li a:last-child {}
- 请注意 a
.. 因为它将选择最后一个 a
- 不是最后一个 li
。在上下文中,无论如何都没有 a
元素。
关于css - 定位最后一个列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19149059/