在下拉菜单/折叠中更改分隔线/文本的颜色，如何在 CSS 中相互独立地更改它们答案

【问题标题】：Change color of divider/text in dropdown menu/collapsed, How do i change them independently of each other in CSS在下拉菜单/折叠中更改分隔线/文本的颜色，如何在 CSS 中相互独立地更改它们
【发布时间】：2015-09-05 10:34:13
【问题描述】：

MY picture

在我的左侧图片中，带有折叠的下拉菜单，我有一条白色分隔线，但现在我的下拉菜单中也有一条白色分隔线，我希望下拉菜单中的分隔线是黑色的分隔线，并且仍然将我的白色分隔线保留在折叠的下拉菜单中。如何在 CSS 中相互独立地更改它们？

.navbar-header {
	padding-bottom: 45px;
}

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {
  color: #fff;
  background-color:transparent;
}

.nav>li {
  position: relative;
  display: block;
  box-sizing: border-box;
  color: rgb(51, 51, 51);
  font-family: oswald, 'open sans', sans-serif;
  font-size: 14px;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  text-align: left;
  text-transform: uppercase;
}

.dropdown-header  {
  list-style: none;
  font-size: 14px;  
}

.navbar-inverse .navbar-collapse  {
  max-height: none;
}

.navbar-inverse .navbar-nav>li>a   {
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
  font-family: oswald, "MS Serif", "New York", serif;
  font-size: 14px;
}

.navbar-nav>li>a {
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 20px;
}

.nav>li>a {
  position: relative;
  display: block;
  padding: 10px 10px;
}

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse {	
  color: #82C332;
  font-weight: 500;
}

.navbar-inverse .navbar-nav .dropdown-menu .divider {
  background-color: #000;
}

.navbar-inverse .navbar-nav .open .dropdown-menu .divider {
  background-color: #fff;
}

.open .dropdown-menu>li>a {
  color: #000;
}

 <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">		
				<span class="sr-only">Toggle navigation</span>
				  <span class="icon-bar"></span>
				 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
				 </button>
				 <a class="navbar-brand" href="#"><img src="img/logo/servicepc-logo1.png"></a>
			</div>
			
			<div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
		   <li class="active"><a href="#">FORSIDE</a></li>       
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">SERVICE <b class="caret"></b></a>
         <ul class="dropdown-menu">
			   <li class="dropdown-header"><a href="#">Alle reparationer</a></li>
               <li class="divider"></li>
               <li><a href="#">Computer Reparationer</a></li>
               <li><a href="#">Backup</a></li>
               <li><a href="#">Virus fjernelse</a></li>
               <li><a href="#">Backup</a></li>
               <li><a href="#">Data Recovery</a></li>
               <li><a href="#">Rensning PC (Støv)</a></li>
               <li><a href="#">Geninstallering af system</a></li>
               <li class="divider"></li>
               <li class="dropdown-header"><a href="#">Info</a></li> 
               <li><a href="#">Portfolio 1</a></li>
               <li><a href="#">Portfolio 2</a></li>
		</ul>
		  </li>
          	 <li><a href="#priser">Priser</a></li>
             <li><a href="#about">OM OS</a></li>
			<li><a href="#">KONTAKT</a></li>
		</ul>	
	</div> 
  </div>
</div>

希望你明白我的意思。

亲切的问候

托马斯

【问题讨论】：

您好。如果您包含问题的 JSFiddle 将会很有用。
寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含所需的行为、特定问题或错误以及重现它所需的最短代码。见How to create a Minimal, Complete, and Verifiable example
嗨 JBux 我太菜鸟了，不知道如何添加 JSFiddle，但我现在注册看看如何:)

标签： css twitter-bootstrap drop-down-menu

【解决方案1】：

在您的 html 文件中，为第二个分隔符指定一个类名 divider2。

<li><a href="#">Geninstallering af system</a></li>
<li class="divider2"></li>
<li class="dropdown-header"><a href="#">Info</a></li> 
<li><a href="#">Portfolio 1</a></li>
<li><a href="#">Portfolio 2</a></li>

在你的 css 文件中，创建一个类变量，如下所示：

.divider2 {
    background-color: black;
}

【讨论】：

@THXMAN 不用担心！ :)

【解决方案2】：

在 Bootstrap 4.0.0-beta.2 中，您可以使用：

<div class="dropdown-divider" style="border-color:black;"></div>

【讨论】：