菜单栏链接 CSS 颜色不变

Question

我试图通过将字体颜色更改为白色来设置导航栏中链接的样式，但颜色保持不变。我试过针对不同的选择器：.navbar、.ul 和 .li 但没有任何效果。我究竟做错了什么？我也试过把它改成白色以外的其他颜色，但没有成功。

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-image: url("stock.jpg");
}
.navbar{
    background-color: black;
}
.navbar .li {
    color: white!important;
    text-decoration: none;
}
.navbar .li .a{
    text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title></title>
</head>  

<body>
    <div class="navbar">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Menu</a></li>
            <li><a href="">STEEPLE BREWERY</a></li>
            <li><a href="">Reservations</a></li>
            <li><a href="">Locations</a></li>
            <li><a href="">Giftcards</a></li>
            <li><a href="">Team</a></li>
        </ul>
    </div>

</body>
</html>

Answer 1

1.) li 和 a 元素是 no 类，因此你不能在你的 CSS 选择器：

2.) 必须为 link 定义颜色，即 a 标签，而不是 li 的颜色（该颜色将被 link颜色，即使是默认颜色，如果你不定义的话)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-image: url("stock.jpg");
}

.navbar {
  background-color: black;
}

.navbar li a {
  color: white;
  text-decoration: none;
}

.navbar li a:hover {
  text-decoration: underline;
  color: yellow;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
  <title></title>
</head>

<body>
  <div class="navbar">
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Menu</a></li>
      <li><a href="">STEEPLE BREWERY</a></li>
      <li><a href="">Reservations</a></li>
      <li><a href="">Locations</a></li>
      <li><a href="">Giftcards</a></li>
      <li><a href="">Team</a></li>
    </ul>
  </div>

</body>

</html>

菜单栏链接 CSS 颜色不变

Menu bar links CSS color not changing

html

css

css-selectors