Question

我使用以下CSS为我的网站设计了一个导航栏：

<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ff9933;
    font-size:90%;
}

li {
    float: left;
    border-right: 1px solid #ffb366;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    text-decoration: none;
}

li a:hover {
    background-color: #e67300;
}
</style>

这是w3schools.com上记录的水平导航栏示例的一个版本：http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black

我的问题是它会影响我网站中使用的其他<li>和<ul>元素，而不仅仅是导航栏。如何使用CSS，确保导航栏与其他<li>和<ul>元素分开？我最近开始学习CSS，所以我确定我在这里遗漏了一些非常基本的东西。

Answer 1

使用可能想要使用css classes

http://www.w3schools.com/cssref/sel_class.asp

ul.mylist {
    .....
}

ul.mylist li {
    .....
}

ul.mylist li a {
    .....
}

ul.mylist li a:hover {
    .....
}

还要确保将该类添加到html

<ul class='mylist'>
    <li>......

Answer 2

与人的答案类似，请将ul元素括在div中，并将div的类设置为navbar。然后将CSS代码更改为：

ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ff9933;
    font-size:90%;
}

ul.navbar li {
    float: left;
    border-right: 1px solid #ffb366;
}

ul.navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    text-decoration: none;
}

ul.navbar li a:hover {
    background-color: #e67300;
}

Answer 3

我将修改您的代码，以演示如何使用类指定您希望设置哪个ul标记

<style>
    ul.myNav { 
        list-style-type: none; 
        margin: 0; 
        padding: 0; 
        overflow: hidden; 
        background-color: #ff9933; 
        font-size:90%; 
    } 

    ul.myNav > li { 
        float: left; 
        border-right: 1px solid #ffb366; 
    } 

    ul.myNav > li a { 
        display: block; 
        color: white; 
        text-align: center; 
        padding-left: 10px; 
        padding-right: 10px; 
        padding-top: 3px; 
        padding-bottom: 3px; 
        text-decoration: none; 
    } 

    ul.myNav > li a:hover { 
        background-color: #e67300; 
    } 
</style>

您所要做的就是将该类添加到html中首选的ul元素中。

<ul class="myNav"> .... </ul>

Answer 4

li:not(:first-child){
 code...
}
li:not(:last-child){
  code...

如何选择性地设置某些li和ul元素的样式？

4 个答案: