Question

以下是我的CSS文件的一部分以及一些HTML。我可以告诉我什么时候我把class =“containerHeader选中”（就像测试标题A一样）背景颜色没有被设置为红色？

div#builderContainer
{
  margin-top: 15px;
  width: 390px;
  height: 700px;
  border: solid 0px #CCCCCC;        
  background-repeat: no-repeat;    
}

div#builderContainer .container
{
  display: none;
  -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; /* Corner radius */
  border: solid 1px #999999;

}

div#builderContainer .container div:hover 
{
  background-color: #EEEEEE;
}

div#builderContainer .containerHeader
{
  -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; 
  background: #93c3cd url(images/ui-bg_diagonals-small_50_93c3cd_40x40.png) 50% 50% repeat; 

  border-bottom: solid 0px #999999;    

  margin: 0px;      
  margin-top: 25px;      
  padding: 10px;    

  /* display: none;  */

  border: solid 1px #999999;    
  font-weight: bold;
  font-family: Verdana;
  background-color: #FFF;        
  cursor: pointer;    
  vertical-align: middle;
}

div#builderContainer .containerHeader:hover
{
  background: #ccd232 url(images/ui-bg_diagonals-small_75_ccd232_40x40.png) 50% 50% repeat;
}

div#builderContainer .containerHeader:active
{
  background: #db4865 url(images/ui-bg_diagonals-small_40_db4865_40x40.png) 50% 50% repeat; 
}

div#builderContainer .containerHeader .selected
{
  background-color: Red;        
}

<div id="builderContainer">

  <div class="containerHeader selected" id="CHA">Test Header A</div>				
  <div class="container" id="CA"></div>

  <div class="containerHeader" id="CHB">Test Header B</div>						
  <div class="container" id="CB"></div>

</div>

Answer 1

div#builderContainer .containerHeader .selected可能将.selected指定为containerHeader的子项。您是否尝试将其定义为#builderContainer .selected？

Answer 2

使用不带空格的选择器div＃builderContainer .containerHeader.selected。

Answer 3

您需要用逗号分隔CSS规则。

我认为您希望div#builderContainer .containerHeader .selected适用于div#builderContainer，.containerHeader和.selected，但它真正适用的是.selected < em>里面 .containerHeader 里面 a div#builderContainer。相反，逗号将它们分开：

div#builderContainer, .containerHeader, .selected {
     background-color: Red;
}

或，如果您打算仅将其应用于同时包含containerHeader和selected类的元素，请在“builderContainer”中删除这两者之间的空格

CSS类对div没有影响

3 个答案: