我正在尝试更改特定HTML组件的背景颜色和文本颜色。

有3个导航栏。我正在尝试为所有的导航条设置一个默认颜色，但同时也改变了1导航条的特定颜色。

对于所有链接，我都在ccs样式表中做了以下操作:

html {
     font: 16px Arial, Helvetica, sans-serif
} 

a {
     color: #1177d1;
}

“a”引用所有a herf元素和工作。但是我想将其中一个特定导航条的文本颜色更改为#FFFFFF，并将背景颜色更改为。将背景颜色更改为##1177D1，但文本颜色不变，因为它仍然继承上述代码。怎么做才能阻止这一切？

下面是所讨论的导航栏的代码元素HTML和CSS:

这是nav元素的CSS样式表

nav ul {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
}

nav ul.vertical {
    flex-direction: column;
}

nav ul.horizontal {
    flex-direction: row;
    background-color: #1177d1;
    color: #FFFFFF;
}

nav ul li {
    flex: 1 1 auto;
    list-style-type: none;
}

nav ul li a {
    text-decoration: none;
}

下面是有问题的导航栏的HTML:

<nav>
      <ul class="horizontal">
        <li><a href="home_page.html">Home</a></li>
        <li><a href="test_page.html">Services</a></li>
        <li><a href="photo_page.html">Photos</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="contact_page.html">Contact Us</a></li>
      </ul>
</nav>

请让我知道如果我需要提供任何其他！我已经被困在这一天，似乎不能得到这是正确的。我肯定我遗漏了一些基本的东西。