我卡在了这部分。我有一个这样的 HTML 菜单:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Item1</a>
<ul>
<li><a href="#">Item1_1</a></li>
<li><a href="#">Item1_1</a></li>
<li><a href="#">Item1_1</a></li>
<li><a href="#">Item1_1</a></li>
<li><a id="last" href="#">Last</a></li>
</ul>
</li>
</ul>
</nav>
CSS 是这样的:
nav {
margin-left: auto;
margin-right: auto;
width: 100%;
}
nav ul ul li a #last {
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: -moz-linear-gradient(top, #fffff 0%, #fffff 100%);
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%);
padding: 0px;
list-style: none;
position: relative;
display: inline-table;
width: 100%;
text-align: center;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
width: 20%;
float: left;
text-align: center;
}
nav ul li:hover {
border-top-left-radius: 1em;
border-top-right-radius: 1em;
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
font-family: Arial,Helvetica,sans-serif;
font-size: 0.9em;
font-weight: bold;
display: block;
padding: 0.9em;
color: #000000;
text-decoration: none;
}
nav ul ul {
width: 20%;
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
font-family: Arial,Helvetica,sans-serif;
float: none;
width: 100%;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
font-family: Arial,Helvetica,sans-serif;
font-size: 0.7em;
width: 89%;
padding: 15px 10px;
}
nav ul ul li a:hover {
background: #4b545f;
}
如您所见，列表中的最后一个元素有一个 id="last"，因为我希望这个元素有一个圆形的底部边框(左侧和右侧也是如此)。但我不知道为什么它不起作用:(。这是我的第一篇文章，很抱歉我的英语，还有很长的文章:)请帮助我，谢谢!
最佳答案
对于 id 你需要像这样制作 css:
nav ul ul li a#last
注意到区别了吗？ #last 与 a 结合。
关于html - 样式化最后一个 <li> <a>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14629205/