我正在创建一个网站,并使用boostrap-vue在屏幕顶部添加一个导航栏。导航栏的右侧将包含一个标题为“Lang”的菜单。我希望“Lang”文本为黑色。文本当前为白色,我无法找到更改它的方法。
我尝试了下面的css代码,它改变了我的导航栏项目的颜色,但“朗”仍然是相同的白色/灰色。
.dropdown {
color: #000!important;
}
.navbar-dark .navbar-nav .nav-link {
color: #000!important;
}
字符串
这是我的navbar的代码:
<b-navbar class="w-50 mx-auto" toggleable="lg" type="dark" variant="info" :sticky="true" bg-foobar>
<!--<b-navbar-brand href="#">NavBar</b-navbar-brand>-->
<b-img :src="require('../assets/BlueLogoPNG.png')" class="logo"></b-img>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav class="ml-auto" >
<b-nav-item href=""><b>Planet Pluto</b></b-nav-item>
<b-nav-item href="#"><b>About Us</b></b-nav-item>
<b-nav-item href=""><b>Support</b></b-nav-item>
<b-nav-item href="#"><b>Credits</b></b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items-->
<b-navbar-nav class="ml-auto">
<b-nav-item-dropdown toggle-class="nav-link-custom" text="Lang" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
<b-dropdown-item href="#">RU</b-dropdown-item>
<b-dropdown-item href="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<BNav/>
</div>
型
我可以控制背景颜色通过. cloud类,但不是颜色。郎文本需要颜色代码#000。
devtools显示文本颜色是通过.navbar-dark .navbar-nav .nav-link类控制的。从google Chrome dev tools添加color:#000!important会产生所需的结果。将此添加到源代码将更改除我的浏览器之外的所有导航栏项的颜色。
如何将Lang菜单的文本颜色更改为黑色?
2条答案
按热度按时间x6yk4ghg1#
可以使用deep selector
字符串
更多的限制,只有
型
b4wnujal2#
尝试variant属性
字符串