无法更改字体颜色或使文本装饰无效答案

【问题标题】：Can't change font color or make text-decoration none to work无法更改字体颜色或使文本装饰无效
【发布时间】：2020-07-29 23:28:01
【问题描述】：

这是我的navbar 的 HTML 代码，我正在尝试选择 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;
}

【问题讨论】：

要改变颜色，需要使用color属性。 font 是 font-* 属性的简写
我将从修复无效的 HTML 开始。只有 <li> 应该是 <ul> 的直接子代，但您有 <div> 的子代

标签： javascript html css flexbox navbar

【解决方案1】：

应该将 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;
}

【讨论】：

【解决方案2】：

未选择锚标记：
在 li 中选择“a”

.navlinks li a{
  color: red; //for font color
  text-decoration: none;
}

【讨论】：

【解决方案3】：

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

}

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

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

<nav>
  <div class="navbarcontainer">
    <ul class = "navlinks float-left"> 
      <li class = option><a href="#"> About</a></li>
      <li class = option><a href="#"> Store</a></li>
    </ul>
    <ul class = "navlinks float-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>
    </ul>
  </div>
  </nav>

请试试这个为li a 赋予风格。

【讨论】：