css - 从 ul 的子类中排除 css

Question

尝试将以下 css 填充和阴影应用于所有主菜单，但不应用于子菜单。我已经尝试了大量的后代组合并使用 :not() 没有运气.. 在这一点上有点旋转，因此请求帮助。你可以在http://www.thefruitnation.com/看到我试图将阴影应用于顶部菜单导航，但不让它显示在子菜单下拉菜单的轻微绿色轮廓中。

当我将以下内容应用于#access a {}

时，基本上只是试图排除 .sub-menu

感谢您的帮助

#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>

Answer 1

你快到了!

问题是您的样式适用于每个 <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;
}