html - 如何使用列表更改菜单中的单个 li 元素？

Question

我使用内联列表为我的网站创建了一个导航栏，然后对其进行了样式设置。每个<li>完全一样，但我希望最后一个具有不同的大小，因为我希望更改它的宽度和填充。

我不知道我是怎么做到的，我尝试了多种方法，但一路上遇到了很多问题。我尝试在 <li> 中添加样式标记在 HTML 页面上，但它完全没有改变，然后我尝试使用在一定程度上起作用的 last-child 选择器。它允许我改变它的填充而不是宽度。但它不仅更改了最后一个，还更改了第一个。

CSS:

.dropdown{ 
position: relative; 
margin: 0 auto;
float: right;
top: 20px;
font-size: 13px;
}

.dropdown li { 
float: left; 
width: 155px;   
background-color:#373737; 
position: relative; 
border-bottom:1px solid #575757; 
border-top:1px solid #797979;
}

.dropdown li a { 
display: block; 
padding: 10px 8px;
color: #fff;    
position: relative; 
z-index: 2000; 
text-align:center; 
}

.dropdown li a:hover,
.dropdown li a.hover{
background: #CF5C3F; 
position: relative; 
}

.dropdown :last-child  li a{
padding: 0px;
width: 40px;
}

HTML

<ul class="dropdown">
        <li><a id="page1" href="index.html">Home</a></li>
        <li><a href="#">Internet Architecture</a>
            <ul class="sub_menu">
                 <li><a href="pages/page2.html">Item Two</a></li>
                 <li><a href="pages/page3.html">Item Three</a></li>
                 <li><a href="pages/page8.html">Item Four</a></li>
                 <li><a href="pages/page9.html">Item Four</a></li>
            </ul>
        </li>
        <li><a href="#">Internet Security</a>
            <ul class="sub_menu">
                 <li><a href="pages/page11.html">Laws</a></li>
                 <li><a href="pages/page10.html">Security Risks</a></li>
            </ul>
        <li><a href="#">Internet Security</a>
            <ul class="sub_menu">
                 <li><a href="pages/page11.html">Laws</a></li>
                 <li><a href="pages/page10.html">Security Risks</a></li>
            </ul>
        </li>
        <li><a href="#">Item One</a>
            <ul class="sub_menu">
                 <li><a href="#">Item Two</a></li>
                 <li><a href="#">Item Three</a></li>
                 <li><a href="#">Item Four</a></li>
            </ul>
        </li>
        <li><a href="pages/contact.html"><img src="images/contact_white.png" width="30px" height="auto"></a></li>

</ul>

有人知道如何解决这个问题吗？

Answer 1

我希望最后一个具有不同的大小，因为我希望更改它的宽度和填充。

因此，如果您指的是级别 1 的最后一个 child ，则使用

ul.dropdown > li:last-child {
   /* Target */
}

如果你的意思是 li 的 each last child 在第 2 层 ul 上，那么使用

ul.dropdown > li > ul > li:last-child {
   /* Target */
}

Demo

Demo (只是更多的元素，没什么特别的)