为什么元素应用的是字体大小属性，而不是颜色属性？

Question

我正在自学 Html/Css，请像个傻瓜一样向我解释（唷！）

帮助消除我试图将列表项定位到无序列表中的疑问。我意识到无法应用颜色属性，但应用了如下所示的字体大小属性。但是当我继续在

<a>

标签后面添加

<li>

标签时，应用了颜色属性。我期待了解原因，而不是使用反复试验。谢谢。

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

.navbar {
  height: 80px;
  background: gray;
}

.navbar .nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .nav-wrapper .logo a {
  text-decoration: none;
  font-size: 30px;
  font-weight: 700;
  color: orangered;
  margin-top: -70px;
}

.navbar .nav-wrapper .navlist ul {
  list-style: none;
}

/* FOCUS HERE */
.navbar .nav-wrapper .navlist ul li {
  display: inline-block;
  margin: 30px;
  font-size: 20px;
  color: #fff;
}

<nav class="navbar">
  <div class="nav-wrapper">
    <div class="logo">
      <a href="#">
        <h3>champ</h3>
      </a>
    </div>
    <div class="navlist">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Visit</a></li>
        <li><a href="#">Donate</a></li>
      </ul>
    </div>
    <div class="navbuttons">
      <button>Login</button>
      <button>Logout</button>
    </div>
  </div>
</nav>

我想如果字体大小有效，那么即使颜色也应该有效。

Answer 1

应用于

font-size

元素的

<li>

属性由

<a>

元素继承，并且有效。

应用于

color

元素的

<li>

属性也由

<a>

元素继承，但它不起作用。这是因为用户代理有一个直接应用于 <a>

 的规则，优先于 

color

 上的可继承 

<li>

 规则。

最简单的解决方案是将您的

color

 规则应用于 

<a>

。

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

.navbar {
  height: 80px;
  background: gray;
}

.navbar .nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .nav-wrapper .logo a {
  text-decoration: none;
  font-size: 30px;
  font-weight: 700;
  color: orangered;
  margin-top: -70px;
}

.navbar .nav-wrapper .navlist ul {
  list-style: none;
}

.navbar .nav-wrapper .navlist ul li {
  display: inline-block;
  margin: 30px;
}


/* both rules move from above */
.navbar .nav-wrapper .navlist ul li a {
  font-size: 20px;
  color: #fff;
}

<nav class="navbar">
  <div class="nav-wrapper">
    <div class="logo">
      <a href="#">
        <h3>champ</h3>
      </a>
    </div>
    <div class="navlist">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Visit</a></li>
        <li><a href="#">Donate</a></li>
      </ul>
    </div>
    <div class="navbuttons">
      <button>Login</button>
      <button>Logout</button>
    </div>
  </div>
</nav>