如何使用列表更改菜單中的單個元素？

我創建了一個導航欄，爲我的網站使用內嵌列表，然後它已被設置風格。每個<li>是完全一樣的，但我希望最後一個有不同的大小，因爲我希望改變它的寬度和填充。如何使用列表更改菜單中的單個元素？

我不知道我如何能夠做到這一點，我嘗試了多種方式，但一路上遇到了很多問題。我嘗試在HTML頁面的<li>標記中添加樣式，但它完全沒有改變，然後我嘗試使用最後一個子選擇器，它在一定程度上起作用。它允許我改變它的填充而不是寬度。但它不僅僅是爲最後一個而改變，而且也是第一個。

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>

有沒有人對如何解決這一問題的任何想法？

來源

2014-01-31 Aaron Kelsey

爲什麼不向這個列表元素添加一個類並通過css設置樣式？像

Item Four

–

我想最後一個有不同的大小，因爲我想改變它的寬度和填充。

所以，如果你的意思是1級的最後一個子不是使用

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

如果你的意思在第二級ul每個最後一個孩子的li，比使用

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

Demo

Demo（只是更多的元素，沒有什麼花哨）

來源

2014-01-31 13:58:17

這可以讓我改變寬度，但我仍然無法改變填充。 –

@AaronKelsey如果它改變'寬度'，所以選擇器正常工作，關於'padding'。這是另一個問題 –

我已經得到它的工作，感謝您的幫助！ –

我可能失去了一些東西，但如果我明白你的問題的權利是爲使簡單的<li>你想成爲鶴立雞羣的id，然後用css改變li#myId ..

來源

2014-01-31 14:00:41 poepje

如何使用列表更改菜單中的單個元素？

回答

相關問題