时间戳

首页 > 解决方案 > 无法更改字体颜色或使文本装饰无效

javascript - 无法更改字体颜色或使文本装饰无效

问题描述

这是我的 HTML 代码 a navbar，我正在尝试选择 CSS 选择器以使我的 LI 的字体具有不同的颜色并删除，当我选择或text-decoration时两者都不起作用。从概念上讲，我在这里缺少什么，正确的答案是什么？.navlinks li.navbarcontainer .option

<nav>
  <div class="navbarcontainer">
    <ul class = "navlinks"> 
      <div class="left">
      <li class = option><a href="#"> About</a></li>
      <li class = option><a href="#"> Store</a></li></div>
      <div class="right">
      <li class = option ><a href="#"> Gmail</a></li>
      <li class = option ><a href="#"> Images</a></li>
      <li class = option ><a href="#"> Logo</a></li>
      <li class = option ><a href="#"> My Image</a></li>
      </div>
    </ul>
  </div>
  </nav>

.navbarcontainer {
  border: 1px solid #2d2d2d;

}

.navlinks {
  display:flex; 
  border: 1px solid #2d2d2d;
  
}

.right {
  margin-left:auto
}
.navlinks li {
  list-style-type: none;
  font-size:14px;
  margin: 0px;
  padding: 4px;
  font: red;
  text-decoration: none;
  display: inline-block;
}

标签： javascripthtmlcssflexboxnavbar

解决方案

text-decoration 属性应该应用于锚标记。要更改文本的颜色，请使用 color 属性。font 属性是以下内容的简写：

  • 字体样式
  • 字体变体
  • 字体粗细
  • 字体大小/行高
  • 字体系列

请注意，不包括颜色属性。

最终的 CSS 应该如下所示：

.navlinks li {
   list-style-type: none;
   font-size:14px;
   margin: 0px;
   padding: 4px;
   display: inline-block;
}
.navlinks li a {
   color: red;
   text-decoration: none;
}

推荐阅读