Question

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

我不知道我是怎么做到这一点的，我尝试了多种方法，但在此过程中遇到了很多问题。我尝试在HTML页面的<li>标记中添加样式，但它完全没有改变，然后尝试使用在一定程度上起作用的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的最后一个孩子而不是

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

如果你的意思是{strong> li ul的{strong> 最后一个孩子，请使用

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

Demo

Demo （只是更多元素，没什么特别的）

Answer 2

我可能在这里遗漏了一些东西，但是如果我理解你的问题，就像给<li>想要成为id中的奇数一样简单，然后使用css来改变{ {1}} ..

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

2 个答案: