Question

我的导航菜单看起来像这样：

<ul id="nav1">
    <li>Link 1</li>
    <li>
        Link 2
        <ul id="subnav1">
            <li>Sublink 1</li>
            <li>Sublink 2</li>
            <li>Sublink 3</li>
        </ul>
    </li>
    <li>Link 3</li>
    <li>Link 4</li>
    <li>Link 5</li>
</ul>

我有一堆CSS样式，如下所示：

ul#nav1{ … styles … }
ul#nav1 > li{ … styles … }

但我真的不希望样式级联到“subnav1”菜单，但它出于某种原因。我认为我的CSS中的“大于”符号会阻止这种情况。如何使“subnav1”菜单具有自己的样式，没有任何从“nav1”级联下来的东西？

实际代码：

<ul id="nav2" class="clearfix">
    <li>
        <div class="nav2hl"></div><a class="drop" href="products.htm">Products</a>
        <div class="menu1bg" classclearfix">
            <ul class="menu1">
                <li>RETAIL</li>
                <li><a href="retail-hot-dogs.htm">Hot Dogs</a></li>
                <li><a href="retail-ring-bologna.htm">Ring Bologna</a></li>
                <li><a href="retail-hams.htm">Hams</a></li>
                <li><a href="retail-make-it-easy-hams.htm">Make it Easy Hams</a></li>
                <li><a href="retail-sausage-brats.htm">Sausage/Brats</a></li>
                <li><a href="retail-deli-meats.htm">Deli Meats</a></li>
                <li><a href="retail-other.htm">Other</a></li>
            </ul>
            <ul class="menu1">
                <li>FOOD SERVICE</li>
                <li><a href="food-service-hot-dogs.htm">Hot Dogs</a></li>
                <li><a href="food-service-ring-bologna.htm">Ring Bologna</a></li>
                <li><a href="food-service-hams.htm">Hams</a></li>
                <li><a href="food-service-sausage-brats.htm">Sausage/Brats</a></li>
                <li><a href="food-service-deli-meats.htm">Deli Meats</a></li>
                <li><a href="food-service-roller-bites.htm">Roller Bites</a></li>
                <li><a href="food-service-pizza-toppings.htm">Pizza Toppings</a></li>
                <li><a href="food-service-other.htm">Other</a></li>
            </ul>
        </div>
    </li>
    <li></li>
    <li><div class="nav2hl"></div><a class="drop" href="recipes.htm">Recipes</a></li>
    <li></li>
    <li><div class="nav2hl"></div><a href="family-fun.htm">Family<br />Fun</a></li>
    <li></li>
    <li><div class="nav2hl"></div><a href="special-offers.htm">Special<br />Offers</a></li>
    <li></li>
    <li><div class="nav2hl"></div><a href="newsworthy.htm">Note &amp;<br />Newsworthy</a></li>
    <li></li>
    <li><div class="nav2hl"></div><a href="retailer-locator.htm">Retailer<br />Locator</a></li>
    <li></li>
    <li><div class="nav2hl"></div><a href="contact-us.htm">Contact<br />Us</a></li>
</ul>

CSS：

div#nav2bg{background:#e8dcab url('../img/bg_nav2.jpg') repeat-y top center;}
ul#nav2{float:right;margin:0;padding:0;list-style-type:none;}
ul#nav2 > li{display:inline-block;position:relative;float:left;margin:0;padding:0;}
ul#nav2 > li:nth-child(even){width:1px;height:93px;background:transparent url('../img/bg_nav2_divider.png') no-repeat top left;}
ul#nav2 > li a,ul#nav2 > li a:visited{display:inline-block;position:relative;width:107px;height:67px;margin:0;padding:26px 0 0 0;color:#856e46;text-align:center;text-transform:uppercase;}
ul#nav2 > li a.drop{height:59px;padding-top:34px;}
ul#nav2 > li a:hover{color:#f4eed6;}
ul#nav2 > li div.nav2hl{display:none;position:absolute;top:0;left:0;width:107px;height:93px;background-color:#af9764;}

div.menu1bg{position:absolute;top:93px;left:50%;z-index:999;width:488px;height:297px;margin-left:-244px;background:rgba(237,230,206,0.95);}
ul.menu1{float:left;width:244px;height:297px;margin:0;padding:0;list-style-type:none;}

Answer 1

基本上你必须覆盖它们。

这里回答了类似的问题： How do I prevent CSS inheritance?

Answer 2

>正是您应该使用的。

我为>提供了JSFiddle的一些技术性示例：

例如，＃nav1会更改list-style，只有#nav1 > li会受到影响（＃subnav1仍然是默认圈子）：

#nav1 > li{list-style-type:square;}

但是，您应该执行类似#nav2 > li{background-color: yellow;}的{{1}} background-color仍然是#subnav2，因为它嵌套在yellow

Answer 3

你有

ul#nav2 > li a, ul#nav2 > li a:visited { ... }

这将针对ul＃nav2＆gt;下的所有锚点。 li，因为你的二级导航中的锚点符合条件，所以它将采用它的样式

使用

ul#nav2 > li > a, ul#nav2 > li > a:visited { ... }

定位更具体的锚点，您可能需要在多个位置应用此

将嵌套的无序列表彼此分开设置样式

3 个答案: