從ul上的子類中排除css

嘗試將以下css填充和陰影應用於所有主菜單，但不應用於子菜單。我已經嘗試過大量的後代組合，並且使用：not（）來運氣不多。在這一點上，這個頭有點旋轉，因此請求幫助。您可以在http://www.thefruitnation.com/處看到我正在嘗試將陰影應用於頂層菜單導航，但沒有顯示在子菜單下拉菜單的淺綠色輪廓中。從ul上的子類中排除css

基本上只是想，當我應用以下到#access一個{}

感謝您的任何援助

#access>.menu-menu-1-container>.menu a:not(.sub-menu) { 
padding: 3px 10px; 
box-shadow: 2px 2px 2px #004700; 
} 


<nav id="access"> 
      <a class="nav-show" href="#access">Show Navigation</a> 
      <a class="nav-hide" href="#nogo">Hide Navigation</a> 
      <div class="menu-menu-1-container"> 
      <ul id="menu-menu-1" class="menu"> 
      <li id="menu-item-499" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-499"><a href="#" style="height: 43px;">Intentions<br> <span>and projects</span></a> 
<ul class="sub-menu" style="display: none;"> 
<li id="menu-item-400" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-400"><a title="more inside" href="http://www.thefruitnation.com/about/">About</a></li> 
<li id="menu-item-509" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-509"><a href="http://www.thefruitnation.com/tfn-fruit-exchange/">TFN Fruit Exchange</a></li> 
<li id="menu-item-515" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-515"><a href="http://www.thefruitnation.com/tfn-public-nursery/">TFN Public Nursery</a></li> 
<li id="menu-item-520" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-520"><a href="http://www.thefruitnation.com/tfn-workshops/">TFN Workshops</a> 
</li> 
</ul> 
</li> 
<li id="menu-item-401" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-401"><a href="http://www.thefruitnation.com/articles/" style="height: 43px;">Articles<br> <span>read on</span></a></li> 
<li id="menu-item-402" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-402"><a href="http://www.thefruitnation.com/festival/" style="height: 43px;">Festival<br> <span>Sacramento 2014</span></a></li> 
<li id="menu-item-405" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-405"><a href="http://www.thefruitnation.com/shop/" style="height: 43px;">Shop<br> <span>help support us</span></a></li> 
<li id="menu-item-475" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-475"><a href="http://www.thefruitnation.com/forums/" style="height: 43px;">Forums<br> <span>Join In!</span></a></li> 
<li id="menu-item-480" class="bp-menu bp-activity-nav menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-480"><a href="http://www.thefruitnation.com/members/admin/activity/" style="height: 43px;">Your Activity<br> <span>Get busy!</span></a> 
<ul class="sub-menu"> 
<li id="menu-item-490" class="bp-menu bp-profile-nav menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-490"><a href="http://www.thefruitnation.com/members/admin/profile/">Profile</a> 
<ul class="sub-menu"> 
<li id="menu-item-487" class="bp-menu bp-settings-nav menu-item menu-item-type-custom menu-item-object-custom menu-item-487"> 
<a href="http://www.thefruitnation.com/members/admin/settings/">Settings</a> 
</li> 
</ul> 
</li><li id="menu-item-485" class="bp-menu bp-notifications-nav menu-item menu-item-type-custom menu-item-object-custom menu-item-485"><a href="http://www.thefruitnation.com/members/admin/notifications/">Notifications</a></li> 
<li id="menu-item-484" class="bp-menu bp-messages-nav menu-item menu-item-type-custom menu-item-object-custom menu-item-484"><a href="http://www.thefruitnation.com/members/admin/messages/">Messages</a></li> 
<li id="menu-item-482" class="bp-menu bp-friends-nav menu-item menu-item-type-custom menu-item-object-custom menu-item-482"><a href="http://www.thefruitnation.com/members/admin/friends/">Friends</a></li> 
<li id="menu-item-483" class="bp-menu bp-groups-nav menu-item menu-item-type-custom menu-item-object-custom menu-item-483"><a href="http://www.thefruitnation.com/members/admin/groups/">Groups</a></li> 
<li id="menu-item-489" class="bp-menu bp-forums-nav menu-item menu-item-type-custom menu-item-object-custom menu-item-489"><a href="http://www.thefruitnation.com/members/admin/forums/">Forums</a></li> 
<li id="menu-item-488" class="bp-menu bp-logout-nav menu-item menu-item-type-custom menu-item-object-custom menu-item-488"><a href="http://www.thefruitnation.com/wp-login.php?action=logout&amp;redirect_to=http%3A%2F%2Fwww.thefruitnation.com&amp;_wpnonce=0b1597a0af">Log Out</a> 
</li> 
</ul> 
</li> 
<li id="menu-item-527" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-527"><a href="http://www.thefruitnation.com/fruity-friends/" style="height: 43px;">Fruity Friends<br> <span>featured</span></a></li> 
<li id="menu-item-528" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-528"><a href="http://www.thefruitnation.com/fruity-faq/" style="height: 43px;">Fruity FAQ</a></li> 
</ul></div>    <div class="clear"></div> 
     </nav>

來源

2014-02-15 user3312912

你在哪裏幾乎沒有排除.SUB菜單！

的問題是，你的風格是將每個<a>內.menu 和:not(.sub-menu)正在尋找<a class="sub-menu"...>

嘗試這樣的：

http://jsfiddle.net/xfSqZ/

#access > .menu-menu-1-container > .menu > li > a { 
    padding: 3px 10px; 
    box-shadow: 2px 2px 2px #004700; 
}

還指出，如果沒有任何其他.menu類，這將做的伎倆：http://jsfiddle.net/xfSqZ/1/

.menu > li > a { 
    padding: 3px 10px; 
    box-shadow: 2px 2px 2px #004700; 
}

來源

2014-02-15 09:17:23 caramba

第一個做的伎倆，第二個不會像我之後崩潰它。謝謝Caramba ..我想我在離開李或ul的地方，嘗試了所有的鑰匙之後，你會感到厭倦哈哈。再次感謝 – user3312912

@ user3312912歡迎您，很高興幫助！請接受答案作爲正確的和快樂的編碼 – caramba

對於任何一種風格的繼承，嵌套元素可以是 '重置' 或簡單地覆蓋，如：

CSS

div { border:1px solid green; } 
div div { border:1px solid red; } 
div div div { border:0; }

- 只是每一級之間的空間

MARKUP

<div> GREEN BORDER 
    <div> RED BORDER 
    <div> NO BORDER </div> 
    </div> 
</div>

來源

2014-02-15 09:19:39

謝謝rob，不知道這個 – user3312912

從ul上的子類中排除css

回答

相關問題