时间戳

首页 > 解决方案 > CSS Color 属性不适用于 .active (Bootstrap 4)

html - CSS Color 属性不适用于 .active (Bootstrap 4)

问题描述

我构建了一个非常简单的导航栏bootstrap 4。我的目标是为font-color. active class变为黑色以显示用户当前所在的页面。

奇怪的是，.active该类适用于诸如font-weight, border, background or text-decoration但 NOT之类的属性color。

这是一支笔：

<p data-height="265" data-theme-id="0" data-slug-hash="pVOoXr" data-default-tab="html,result" data-user="fdhu" data-embed-version="2" data-pen-title="color-property-issue" class="codepen">See the Pen <a href="https://codepen.io/fdhu/pen/pVOoXr/">color-property-issue</a> by ferdinand huber (<a href="https://codepen.io/fdhu">@fdhu</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

任何人都可以给我一个关于如何解决这个问题的提示吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>color property issue</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <style>

.active {
  font-weight: bold; /*applies*/
  border: 2px solid red; /*applies*/
  background: yellow; /*applies*/
  text-decoration: underline; /*applies*/

  color: black; /*doesn't apply, neither by adding !important*/
 }
    </style>
</head>

<body>

<nav class="navbar navbar-expand">      
  <div class="navbar-nav">
    <div class="nav-item active">
      <a class="nav-link" href="#">Link-1</a>
    </div>
   <div class="nav-item">
      <a class="nav-link" href="#">Link-2</a>
    </div> 
  </div>
</nav>

</body>
</html>

标签： htmlcss

解决方案

给<a>锚标记颜色。因为超链接采用默认颜色并且还覆盖了父.active

.active a {    
  color: black;
 }

推荐阅读