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

【问题标题】：How to selectively style certain li and ul elements?如何选择性地设置某些 li 和 ul 元素的样式？
【发布时间】：2019-06-18 13:23:43
【问题描述】：

我使用以下 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> 元素，而不仅仅是导航栏。如何确保导航栏与其他 <li> 和 <ul> 元素分开，仅使用 CSS？我最近才开始学习 CSS，所以我确定我在这里遗漏了一些非常基础的东西。

【问题讨论】：

标签： css

【解决方案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>......

【讨论】：

【解决方案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;
}

【讨论】：

那么我该如何在 html 中调用这个 CSS 呢？
@HassanBaig 使用<ul class="navbar">
有道理。所以我只是用ul 来称呼它，例如<ul class="navbar">，不必担心封闭的<li> 元素。
@HassanBaig 如果此答案对您有所帮助，请单击“3”下方向下箭头下方的复选图标。
Bennet，我已将男人的答案标记为最佳答案。你的很好（我赞成），但他的更完整，因为它包含主要答案正文中的 HTML 部分。

【解决方案3】：

我将修改您的代码以演示如何使用 classes 来指定您希望设置样式的 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>

【讨论】：

> 运算符是什么？
x > y 表示：y 是x 的直接子代，而不是孙代或更多。无论如何，在这种情况下并不是那么必要。

【解决方案4】：

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

【讨论】：