我想将事件菜单链接的颜色更改为绿色。我尝试了各种方法(查看开发者模式从框架应用了哪些规则),但它没有用。你能告诉我如何进行吗?我正在使用 Bootstrap 4 和 mdbootstrap。
HTML代码:
<nav class="navbar navbar-expand-md navbar-light sticky-top">
<div id="navcontainer" class="d-flex container py-2 justify-content-center align-items-center">
<!-- Logo+Nev -->
<div id="nevtitulus" class="d-flex align-items-start mr-lg-5 mr-md-3">
<div>
<img id="logo" class="mr-lg-3 mr-2" src="images/DRLJ_logo.png" alt="logo">
</div>
<!--logo-->
<div class="text-center">
<span id="logoname">Dr. Langmár Judit</span>
<!-- hide on screens smaller than md -->
<p id="logodesc" class="d-none d-md-block">Akupunktőr, üzemorvos, orthopaed szakorvos</p>
<!-- hide on screens wider than sm -->
<p id="logodesc2" class="d-md-none">Akupunktőr, üzemorvos, <br> orthopaed szakorvos</p>
</div>
<!--Nev+titulus-->
</div> <!--logo+nev container-->
<div id="hamburger-wrapper" class="ml-5 ml-md-0">
<div id="button-wrapper" class="d-flex szelesseg justify-content-center">
<!-- hamburger menu -->
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navcollapse" aria-controls="navcollapse"
aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<!-- collapse navbar -->
<div class="collapse navbar-collapse" id="navcollapse">
<ul class="nav navbar-nav text-center">
<li class="nav-item"><a class="nav-link" href="#fooldal">Főoldal<span class="sr-only">(current)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#kezelesek">Kezelések</a></li>
<li class="nav-item"><a class="nav-link" href="#arak">Árak</a></li>
<li class="nav-item"><a class="nav-link" href="#galeria">Galéria</a></li>
<li class="nav-item"><a class="nav-link" href="#rolam">Rólam</a></li>
<li class="nav-item"><a class="nav-link" href="#kapcsolat">Kapcsolat</a></li>
</ul>
</div>
<!-- collapse navbar -->
</div>
<!--hamburger-wrapper-->
</div>
<!--Navcontainer-->
</nav>
到目前为止我已经尝试过但没有奏效的 CSS 技巧(只有悬停有效):
.navbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
color: rgb(129, 91, 73);
background-color: rgba(0, 0, 0, 0.1);
}
.navbar-light .navbar-nav .nav-item .nav-link:focus {
color: #0DB159;
}
.navbar-light .navbar-nav .nav-item:active .nav-link {
color: #0DB159;
}
#navcollapse a:active {
color: #0DB159;
}
下面这个有效,但前提是导航所指的 anchor 标签从正文中删除
.nav.navbar-nav .nav-item .nav-link:focus {
color: #0DB159
}
我也尝试了这些,但直到' anchor 标签在正文中才起作用......
.nav.navbar-nav .nav-item .nav-link:focus,
.nav.navbar-nav .nav-item:focus,
.nav.navbar-nav .nav-item a:focus,
.nav.navbar-nav .nav-item .nav-link a:focus,
.nav.navbar-nav .nav-item .nav-link:active,
.nav.navbar-nav .nav-item:active,
.nav.navbar-nav .nav-item a:active,
.nav.navbar-nav .nav-item .nav-link a:active {
color: #1c8a66}
我的 friend 建议在 CSS 中使用 .active 类,但这也不起作用:
.nav.navbar-nav .nav-item .nav-link.active {
color: #1c8a66
}
HTML 中的 anchor :
<a class="anchor" id="kezelesek"></a>
CSS 中的 anchor 类
a.anchor {
display: block;
position: relative;
top: -57px;
visibility: hidden;
}
这里你可以看到问题:如果相应的anchor标签存在,菜单不会改变颜色:
https://www.w3schools.com/code/tryit.asp?filename=FVHSP1KJDQZY
最佳答案
您需要使用与 Bootstrap CSS 选择器具有相同特异性的 CSS 选择器。
.navbar-light .nav-item.active .nav-link,
.navbar-light .nav-item .nav-link:active,
.navbar-light .nav-item .nav-link:focus,
.navbar-light .nav-item:hover .nav-link {
color: #00B159;
}
关于css - Bootstrap 4 导航事件链接颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52429751/