Question

我只是启动的初学者，很难弄清楚如何根据自己的喜好更改CSS。我的标题中有一个下拉菜单，并且可以更改颜色。然而，当选择了dropwdownmenu，字体颜色保持不变？我该如何改变？我尝试了以下操作： .dropdown-toggle:active, .open .dropdown-toggle { background:#ffffff !important; color:#7dc623 !important; } 但这并没有任何改变。

						<nav class="navbar navbar-expand-lg navbar-light bg-light">
						  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
							<span class="navbar-toggler-icon"></span>
						  </button>
						  <div class="collapse navbar-collapse" id="navbarNavDropdown">
							<ul class="navbar-nav">
							  <li class="nav-item">
								<a class="nav-link" href="#">Link 1</a>
							  </li>
							  <li class="nav-item">
								<a class="nav-link" href="#">Link 2</a>
							  </li>
							  <li class="nav-item dropdown">
								<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								  Dropdown
								</a>
								<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
								  <a class="dropdown-item" href="#">Link 3</a>
								  <a class="dropdown-item" href="#">Link 4</a>
								</div>
							  </li>
							</ul>
						  </div>
						</nav>

看到背景为绿色，但文本为黑色，但应为白色。

see screenshot

Answer 1

直接在a标记上应用CSS属性可能会导致某些问题，建议在文本的span标记之间使用a。

即：

.navbar{
  background-color: #FFFF99 !important;
}

.text_in_span{
  color: #7dc623 !important;
}

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#"><span class="text_in_span">Link 1</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><span class="text_in_span">Link 2</span></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="text_in_span">Dropdown</span>
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#"><span class="text_in_span">Link 3</span></a>
          <a class="dropdown-item" href="#"><span class="text_in_span">Link 4</span></a>
        </div>
      </li>
    </ul>
  </div>
</nav>

我想应该可以解决这个问题，欢呼。

Answer 2

从代码中删除.open可以达到目的：

.dropdown-toggle:active, .dropdown-toggle {
    background:#ffffff !important; 
    color:#7dc623 !important;
}

更改活动下拉菜单的字体颜色

2 个答案: