Question

我尝试了很多东西，但字体颜色不起作用。有人可以帮忙吗？

div ul{
  margin-left: 40%;
}
   
 .navigation li{
 display: inline-block;
 margin-left: 10%;   
 color: #000;
}

   <div class="navigation">
   <nav>
   <ul>
  <li><a href="#">culture</a></li>
  <li><a href="#">cuisine</a></li>
  <li><a href="#">travel</a></li>
 </ul>
</nav>
</div>

Answer 1

问题在于您使用的超链接具有由浏览器定义的固有color属性，其强度大于您的.navigation li选择器 specificity 。

具体来说，Chrome有选择器a:-webkit-any-link，其特异性为1010，而您的选择器的特异性为0010。

要覆盖此内容，只需将color声明放在.navigation li a上，直接定位<a>代码，而不是依赖继承。

div ul {
  margin-left: 40%;
}

.navigation li {
  display: inline-block;
  margin-left: 10%;
}

.navigation li a {
  color: #000;
}

<div class="navigation">
  <nav>
    <ul>
      <li><a href="#">culture</a></li>
      <li><a href="#">cuisine</a></li>
      <li><a href="#">travel</a></li>
    </ul>
  </nav>
</div>

希望这有帮助！：）

字体颜色不起作用

1 个答案: