Question

我坚持这一部分。我有一个像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”，因为我希望这个项目有一个更圆的底部边框（左侧和右侧）。但我不知道为什么它不起作用:(。我的第一篇文章很抱歉我的英文，以及长篇文章以及:) Plase帮助我，谢谢你！

Answer 1

对于id，你需要像这样制作css：

nav ul ul li a#last

注意到了区别？ #last与a。

组合在一起

Answer 2

由于#last是唯一的，您只需要：

#last {
   ...your css..
}

Answer 3

a #last表示“ID为"last"的元素是<a>代码的子代。

你不需要那里的空间。 a#last表示“<a>代码，其ID为"last"。

实际上，由于ID应该是唯一的，因此您可以使用#last，而不使用a（或者甚至是之前的其他元素）。

设置最后的<li> <a></a> </li>

3 个答案: