CSS类对div没有影响 [英] CSS class not having an effect on a div

问题描述

以下是我的CSS文件和一些HTML的一部分。任何人都可以告诉我，当我把class =containerHeader selected（就像在测试标题A上）背景颜色没有被设置为红色吗？

  div＃builderContainer {margin-top：15px; width：390px;身高：700px; border：solid 0px #CCCCCC;背景重复：不重复; } div＃builderContainer .container {display：none; -moz-border-radius：4px; -webkit-border-radius：4px; border-radius：4px; / * Corner Corner * / 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;背景：＃93c3cd网址（images / ui-bg_diagonals-small_50_93c3cd_40x40.png）50％50％重复; border-bottom：solid 0px＃999999; margin：0px; margin-top：25px;填充：10px; / *显示：无; * / border：solid 1px＃999999; font-weight：bold; font-family：Verdana; background-color：#FFF;光标：指针; 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％重复; } div＃builderContainer .containerHeader .selected {background-color：Red; }  

< div id =builderContainer> < div class =containerHeader selectedid =CHA>测试标题A< / div> < div class =containerid =CA>< / div> < div class =containerHeaderid =CHB> Test Header B< / div> < div class =containerid =CB>< / div>< / div>

解决方案

使用选择器div＃builderContainer .containerHeader.selected时不需要空格。

The following is an section of my CSS file plus some HTML. Can anyone tell me when I put class="containerHeader selected" (as is on Test Header A) the background color is not being set to Red?

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>

解决方案

Use selector div#builderContainer .containerHeader.selected without the space.

这篇关于CSS类对div没有影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！