我正在自学html/css,请像个假人一样给我解释一下(呼!)

帮助消除我试图在无序列表中定位我的列表项的疑虑.我意识到不能应用 colored颜色 属性,但应用了如下所示的字体大小属性.但是,当我在<li>个标签之后添加<a>个标签时,应用了 colored颜色 属性.我期待着理解为什么,而不是使用试错法.谢谢.

* {
  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>

我想,如果字体大小如此有效,那么连 colored颜色 都应该有效.

推荐答案

应用于<li>font-size属性由<a>继承,并且可以正常工作.

应用于<li>color属性也由<a>继承,但it doesn't工作.这是因为浏览器有一个规则(来自它自己的样式表)直接应用于<a>,优先于<li>上可继承的color规则.浏览器没有取消你的font-size的规则.

enter image description here

最简单的解决方案是将你的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 moved 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>

Html相关问答推荐

如何删除html原生对话框的宽度

带有多种 colored颜色 的HTML按钮

未知高度正在应用于前标记

如何更改Django中的默认按钮?

减小HTML负载中base64字符串的大小

如何在CSS中延迟触发2个转换?

如何 Select 表格';TMS Web Core中的body html元素?

为什么 CSS 网格超出了父级?

下划线在 Bootstrap 5 导航链接下无法正常工作

使用 Thymeleaf 将图像水平居中

使用 popover api 和 `

CSS "overflow"不能显示整个单词

如何使用 Bootstrap Grid 系统修复大屏幕上图片和进度条之间的空白?

为什么
标签在 Edge 和 Firefox 中的编号会有两种不同的结果?

如何使我的设计适合与我的框架尺寸不同的视口?

有没有办法让 textarea 在调整大小时不显示 CSS 转换?

如何在react 中向按钮添加禁用属性?

变换元素以适应高度(Angular,SCSS)

自定义进度条 Html 和 CSS 布局

样式不适用于来自 tailwindcss 的网络