UL李：最後一個孩子影響在第二UL

Question

JsFiddle

我的問題是在過去裏，使用僞代碼:last-child當我想到包含liE由風格的影響，但它在最後li.subNav受影響。

我試過那些（下），但沒有什麼作品。

nav ul:first-child li:last-child {border: none;padding-right: 0;} 
nav ul:not(.subNav) li:last-child {border: none;padding-right: 0;} 

如何讓主ul的最後li影響？

Answer 1

最後一個裏面有一個div。因此，它不是最後一個孩子。你可以使用:last-of-type瞄準最後李：

nav ul li:last-of-type {border: none;padding-right: 0;} 

DEMO

Answer 2

刪除位於ul內部的div。在ul中直接添加標籤是無效的。

將它放入li或如果不是非常必要的話將其刪除。

否則你的css選擇器就好了。

<nav> 
    <ul> 
     <li><a href="#">A</a></li> 
     <li class="B"> 
      <a href="#">B</a> 
      <ul class="subNav"> 
       <li><a href="#">F</a></li> 
       <li><a href="#">G</a></li> 
       <li><a href="#">H</a></li> 
       <li><a href="#">I</a></li> 
      </ul> 
     </li> 
     <li><a href="#">C</a></li> 
     <li><a href="#">D</a></li> 
     <li><a href="#">E</a></li> 
    </ul> 
</nav> 

DEMO

Answer 3

這不是最後一個孩子，你可以使用第n-最後孩子：

nav ul > :nth-last-child(2) 

或者，用最後的類型：

nav ul > li:last-of-type 

---

但我會建議你使用@Sowmya答案，它在語義上是正確的。

Answer 4

你選擇在邏輯上是正確的，但問題是，li不是其父ul的最後一個孩子，因爲有這麼div.clear

<ul> 
    <li><a href="#">A</a></li> 
    <li class="B"><a href="#">B</a> 
     <ul class="subNav"> 
     ... 
     </ul> 
    </li> 
    <li><a href="#">C</a></li> 
    <li><a href="#">D</a></li> 
    <li><a href="#">E</a></li> 
    <div class="clear"></div> 
</ul> 

在這種情況下nav ul li:last-child不匹配任何東西，因爲li不是最後一個孩子。您應該使用nav ul li:last-of-type來匹配最後一個li元素。

注意ul唯一允許li兒童，有這麼一個div包含在ul是錯誤的。如果你刪除那div.clear你的代碼將工作。

Answer 5

僞類:last-child只有當元素是父的最後一個子觸發。

在你的情況下，你的ul內有div，這是不允許的。將其移除並在父母ul上使用某種clearfix。