为什么我的导航栏文本不使用 CSS 改变颜色？答案

【问题标题】：Why isn't my navbar text changing color with CSS?为什么我的导航栏文本不使用 CSS 改变颜色？
【发布时间】：2022-11-22 22:59:58
【问题描述】：

使用以下 HTML 和 CSS，我似乎无法将超链接的文本颜色更改为蓝色或紫色？我错过了什么？

<body>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="menu.html">Menu</a></li>
            <li><a href="book.html">Book</a></li>
            <li><a href="about.html">About</a></li>
        </ul>
    </nav>
</body>

nav ul { /* Navbar unordered */
    list-style: none;
    text-align: center;
    background-color: #495e57;
    border-radius: 10px;
}

nav li { /* Navbar ordered */
    display: inline-block;
    padding: 20px;
    font-size: 1.5rem;
    border-radius: 10px;
}

nav li:hover{ /* Navbar on mouse hover */
    background-color: #1f2926;
    color: white;
}

我试过使用 !important 但无济于事。我发现唯一成功的方法是将它包装在 HTML 代码本身中，如下所示：

<li><a style="color: white" href="index.html">Home</a></li>

【问题讨论】：

标签： html css list html-lists

【解决方案1】：

另一个想法是将 a 标签的 color 属性设置为 inherit，以便它继承其父级 li 属性的计算颜色：

nav ul {
  /* Navbar unordered */
  list-style: none;
  text-align: center;
  background-color: #495e57;
  border-radius: 10px;
}

nav li {
  /* Navbar ordered */
  /* set default color to blue, so that anchor tags inherit this */
  color: blue;
  display: inline-block;
  padding: 20px;
  font-size: 1.5rem;
  border-radius: 10px;
}

nav li:hover {
  /* Navbar on mouse hover */
  background-color: #1f2926;
  color: white;
}

nav a {
  /* anchor tags should inherit color of parent */
  color: inherit;
}

<body>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="menu.html">Menu</a></li>
      <li><a href="book.html">Book</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </nav>
</body>

【讨论】：

如果li中有更多项目，确实有用

【解决方案2】：

您将颜色设置为 li 而不是 a。

a 元素有一个默认颜色，所以你需要选择它。

a { 
  color: white;
}

nav ul {
  list-style: none;
  text-align: center;
  background-color: #495e57;
  border-radius: 10px;
}

nav li {
  display: inline-block;
  padding: 20px;
  font-size: 1.5rem;
  border-radius: 10px;
}

nav li:hover {
  background-color: #1f2926;
}

a {
  color: white;
}

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="menu.html">Menu</a></li>
    <li><a href="book.html">Book</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</nav>

或者在 (li) 上悬停：

nav li:hover a {    
  color: white;
}

nav ul {
  list-style: none;
  text-align: center;
  background-color: #495e57;
  border-radius: 10px;
}

nav li {
  display: inline-block;
  padding: 20px;
  font-size: 1.5rem;
  border-radius: 10px;
}

nav li:hover {
  background-color: #1f2926;
}

nav li:hover a {
  color: white;
}

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="menu.html">Menu</a></li>
    <li><a href="book.html">Book</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</nav>

【讨论】：