風格規則適用於錯誤的元素

Question

我有以下規則，其目標級別0最後李子ul。出於某種奇怪的原因，以下規則也適用於其他元素的樣式。我也附上截圖。

#primary-menu ul li:last-child ul{ 
    left: -139%; 
} 

正如您在下面看到的，上面的樣式也適用於Our Memebers兒童ul。 Talk to Us兒童ul造型工作正常。

HTML

<nav class="navbar navbar-default" id="primary-menu"> 
    <div class="container"> 
    <div class="row"> 
     <div class="collapse navbar-collapse"> 
     <ul id="menu-primary-menu" class="nav nav-justified"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Our Members</a> 
      <ul class="sub-menu"> 
       <li><a href="#">Member Countries</a> 
       <ul class="sub-menu"> 
        <li><a href="#">American Samoa</a></li> 
        .... 
       </ul> 
       </li> 
       <li><a href="#">How to Become a member</a> 
       <ul class="sub-menu"> 
        <li><a href="#">Apply</a></li> 
        .... 
       </ul> 
       </li> 
       <li><a href="#">Interim Members</a> 
       <ul class="sub-menu"> 
        <li><a href="#">Bouganville</a></li> 
        .... 
       </ul> 
       </li> 
       <li><a href="#">Regional NGO’s</a></li> 
       <li><a href="#">Observers</a> 
       <ul class="sub-menu"> 
        <li><a href="#">Hawaii</a></li> 
       </ul> 
       </li> 
      </ul> 
      </li> 
      <li><a href="#">About Us</a> 
      <ul class="sub-menu"> 
       <li><a href="#">Our Donors</a></li> 
       .... 
      </ul> 
      </li> 
      <li><a href="#">Talk to Us</a> 
      <ul class="sub-menu"> 
       <li><a href="#">Our Locations</a></li> 
       <li><a href="#">Contact Us</a></li> 
      </ul> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</nav> 

什麼我的樣式規則做錯了什麼？

Answer 1

看起來你可能需要增加特異性位：

#primary-menu #menu-primary-menu > li:last-child ul { 
 
    left: -139%; 
 
}

這裏是一個fiddle。我改變了背景顏色，所以你可以看到差異（因爲我們錯過了你的CSS文件的其餘部分）。

Answer 2

嘗試：

#primary-menu > ul > li:last-child ul { 
    left: -139%; 
}