css - 不能对 nav 和 ul 应用不同的样式

Question

我正在尝试在 HTML 文档中创建两个导航菜单。我正在使用 nav 和 ul 标签。但是我的 CSS 不允许我为两者创建不同的外观。一个 nav 将在页面顶部，第二个在侧面。外观呈现在旁边的菜单上。

这是 HTML 的相关部分:

<div id="navbar"> 

    <nav id="navbar_text">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="aboutus.html">About</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Services</a></li>
    </ul>
    </nav>

</div> <!--END navbar-->

<div id="main-wrap" class="group">

    <aside>
    <nav id="sidebar">
    <ul>
        <li><a href="contact.html">Contact Us</a></li>
        <li><a href="#">Awards & Articles</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Photo Gallery</a></li>
    </ul>
    </nav>

这是我的 CSS:

#sidebar a:link{
    color: #663333;
}

#sidebar a:hover{
    color: #dccfbd;
}

#navbar_text a:link{
    color: #bca380;
}

#navbar_text a:hover{
    color: #dccfbd;
}

#navbar_text{
    width: 100%;
    float: left;
}

#navbar_text li {
    float: left;
    list-style: none;
    padding: 0; 
    background: #663333;
    margin: 0;
    color:#bca380;
}

nav ul li a {
    display: block;
    padding: 10px 10px 10px 15px;
    background: #cab69a;
    -webkit-border-radius: 8px 0px 0px 8px;
    border-radius: 8px 0px 0px 8px;
    margin-top: 10px;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 120%;
    font-weight: bold;
    color: #663333;
    text-decoration: none;
    -webkit-box-shadow:  2px 2px 1px 2px rgba(181, 154, 115, .25);
    box-shadow:  2px 2px 1px 2px rgba(181, 154, 115, .25);
}

nav ul {
    list-style:none;
}  

Answer 1

如果您希望 #navbar_text 和 #sidebar 导航菜单具有不同的样式，您必须在 CSS 中具体指定您希望每个菜单的外观。

因此，您可以使用类似...

#navbar_text ul {}
#navbar_text ul li {}
#navbar_text ul li a {}
#navbar_text ul li a:hover {}

#sidebar ul {}
#sidebar ul li {}
#sidebar ul li a {}
#sidebar ul li a:hover {}

基本上，不要太笼统地说...

nav ul li a {}

因为这将为两个菜单设置样式，因为它们都使用相同的属性。

如果您要就这两个菜单的位置而不是外观寻求帮助，您必须提供更多有关它们当前所在位置以及您希望它们所在位置的信息。但是我上面提到的示例可能会帮助您确定位置，您只需要具体说明您希望#sidebar 菜单以某种方式定位，而#navbar_text 以不同的方式定位。

例如……

#navbar_text ul {
    *add position styles here*
}

#sidebar ul {
    *add position styles here*
}