我正在尝试在bootstrap 4手风琴上设置卡片标题的样式,但似乎无法覆盖预设的类样式。

我想更改.btn-link,以便在活动或访问时不加下划线,但.btn-link:active.btn-link:visited似乎没有改变输出中的任何内容,我不知道为什么。

是因为我需要更改引导CSS代码本身吗?我在CodePen中进行此操作,因此无法从那里访问它。

如果以前有人遇到过此问题,我们将很高兴收到您的来信!

这是CodePen中笔的链接:https://codepen.io/jreecebowman/full/dmpLRp/(“手风琴”位于“产品”部分。

否则,代码如下。

提前致谢!

html代表手风琴的第一张卡片:

<div class="card">
<div class="card-header" id="headingOne">
  <h5 class="mb-0">
    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      Collapsible Group Item #1
    </button>
  </h5>
</div>

<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion1">
  <div class="card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica...
  </div>
</div>




对应的CSS:

#products {
padding-top:100px;
min-height:100%;
position:relative;
background-color:whitesmoke;
#accordion1, #accordion2 {
    box-shadow:0px 0px 5px 0px lightgray;
    #headingOne {
        .btn-link {
            color:navy;
            opacity:0.8;
        }
        .btn-link:hover {
            opacity:1.0;
            text-decoration:none;
        }
        .btn-link:active {
            text-decoration:none;
        }
        .btn-link:visited {
            text-decoration:none !important;
        }
    }
}


}

最佳答案

这不仅是:hover和:active,还必须添加:focus

.btn-link:focus {文本修饰:无; }

尝试这个:

#products {
padding-top:100px;
min-height:100%;
position:relative;
background-color:whitesmoke;
#accordion1, #accordion2 {
    box-shadow:0px 0px 5px 0px lightgray;
    #headingOne {
        .btn-link {
            color:navy;
            opacity:0.8;
        }
        .btn-link:hover {
            opacity:1.0;
            text-decoration:none;
        }
        .btn-link:active {
            text-decoration:none;
        }
        .btn-link:focus {
            text-decoration:none;
        }
        .btn-link:visited {
            text-decoration:none !important;
        }
    }
}

10-05 21:04
查看更多