html - 如何在 CSS 的同一页面上设置两个无序列表的样式？

Question

我正在尝试向 navBar2 部分下的第二个无序列表添加不同的样式。我试过使用像 ul.navBar2 这样的类将它应用到第二个 div 部分，但我无法让它工作。

ul {
list-style-type: none;
color: white;
margin: 0;
}

li {
display: inline;
float: right;
}
li a{
text-decoration: none;
color: white;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 20px;
padding-right: 20px;
}

li a:hover {
background: white;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 20px;
padding-right: 20px;
color: #171717;
 }

<div id="navBar1">
<nav>
<ul>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Downloads</a></li>
    <li><a href="#">Sign Up</a></li>
</ul>
</nav>

<div id="navBar2">
<ul color: black; font-size: 20px;>
    <li><a href="#">home</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">gallery</a></li>
</ul>
</div>

Answer 1

我很困惑为什么没有建议向 ul 添加一个类。

<nav>
    <ul class="ul_class1">
        <li><a href="#">About Us</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">Sign Up</a></li>
    </ul>
</nav>
<div id="navBar2">
    <ul class="ul_class2">
        <li><a href="#">home</a></li>
        <li><a href="#">services</a></li>
        <li><a href="#">gallery</a></li>
    </ul>
</div>

CSS:

.ul_class1 li {
    //My CSS
}

.ul_class2 li {
    //My CSS 2
}

为了将来引用，内联样式写成 <ul style="color: black; font-size: 20px;">