HTML/CSS新手求助：修改导航栏字体颜色与字号

我是HTML和CSS新手，想把导航栏里的「Home、Shop、Pages、Contact」链接字体改成黑色，还想调整字号，但试了之后没效果，麻烦帮忙解决。

HTML代码 #

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title> shoe Website</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="homepage.css">
  </head>
  <body>
    <div class="top-header">
      <a href="">About us</a>
      <a href="">Privacy Policy</a>
      <a href="">Contact us</a>
      <a href="">Terms of use</a>
      
      <div class="middle"> </div>
      <div class="space-end"></div>
    </div>

    <div class="navbar">
      <div class="logo">
      <img src="images/Screenshot 2023-07-09 162710.png">
      </div>
      <div class="navbar">
        <ul>
          <li> <a href="">Home</a></li>
          <li> <a href="">Shop</a></li>
          <li> <a href="">Pages</a></li>
          <li> <a href=""> Contact</a></li>
        </ul>
      </div>
    </div>
    
  </body>

</html>

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

.top-header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #343a40;
  height: 40px;
  width: 100%;
  margin: 0;
  padding-left: 20px;
  align-items: center;
  margin-bottom: 30px;
}
a{
  font-family: 'Poppins', sans-serif;
  width: 120px;
  text-align: center;
  font-size: 13px;
  text-decoration: none;
  color: #F4EEE0;
  margin: 0;
}
a:hover{
  color: #176B87;
  transition: 0.3s ease;
}

body, html{
  margin: 0;
  margin: 0;
}
.navbar{
  display: flex;
  flex-direction: row;
}
.logo{
  padding-left: 30px;
  width: 500px;
  
}
ul, li{
  list-style-type: none;
  display: flex;
  color: #000000;
}

当前效果 #

导航栏中的「Home、Shop、Pages、Contact」链接继承了全局<a>标签的浅色调和13px字号，无法显示为黑色。

期望实现 #

修改导航栏内「Home、Shop、Pages、Contact」链接的字体颜色为黑色，并调整字号。

解决方法 #

1. 修复HTML类名重复问题 #

嵌套的两个navbar类会导致样式选择混乱，把内层的navbar改成更明确的类名（比如nav-links）：

<div class="navbar">
  <div class="logo">
    <img src="images/Screenshot 2023-07-09 162710.png">
  </div>
  <!-- 修改类名为nav-links -->
  <div class="nav-links">
    <ul>
      <li> <a href="">Home</a></li>
      <li> <a href="">Shop</a></li>
      <li> <a href="">Pages</a></li>
      <li> <a href=""> Contact</a></li>
    </ul>
  </div>
</div>

2. 用高优先级选择器覆盖全局样式 #

全局<a>标签的样式优先级高于给ul/li设置的颜色（颜色是给li设置的，不是链接本身），直接选中导航栏内的<a>标签修改：

/* 选中导航栏内的链接，设置黑色和目标字号 */
.nav-links ul li a {
  color: #000000;
  font-size: 16px; /* 可根据需求调整字号 */
  width: auto; /* 取消全局固定宽度，避免导航链接过宽 */
  margin: 0 15px; /* 添加左右间距，优化排版 */
}

/* 保留导航链接的hover效果 */
.nav-links ul li a:hover {
  color: #176B87;
}

3. 额外优化建议 #

全局<a>标签的width:120px会影响所有链接排版，建议只给顶部导航的链接设置固定宽度，然后去掉全局<a>的width属性：

/* 仅给顶部导航的链接设置固定宽度 */
.top-header a {
  width: 120px;
}

/* 修改全局a标签样式，去掉width属性 */
a{
  font-family: 'Poppins', sans-serif;
  text-align: center;
  font-size: 13px;
  text-decoration: none;
  color: #F4EEE0;
  margin: 0;
}

内容的提问来源于stack exchange，提问作者Zubiii04