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;
}

Answer 2

对于任何类型的样式继承，嵌套元素可以“重置”或覆盖，如：

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

在ul上从子类中排除css

2 个答案: