Question

我在bootstrap 4中构建了一个非常简单的导航栏。我的目标是将。font-color的{{1}}设置为黑色，以显示用户当前所在的页面。

奇怪的是，active class类适用于.active但不是font-weight, border, background or text-decoration等属性。

这是一支笔：

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>

Answer 1

将颜色赋予<a>锚标记。因为超链接采用默认颜色，并且还会覆盖父.active

.active a {    
  color: black;
 }

Answer 2

链接的默认颜色会覆盖div的继承的颜色。

您需要使选择器更具体，以便它适用于链接本身。

.active a {
  font-weight: bold;
  border: 2px solid red;
  background: yellow;
  text-decoration: underline;
  color: black;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<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>

Answer 3

您需要在.active a

中进行css课程

.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*/
 }
     
.active a {
   color: #000;
 }

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

Answer 4

只需为您提供属性color:#000!important;重要属性即可将该类激活为您的锚标记。

CSS Color属性不适用于.active（Bootstrap 4）

4 个答案: