CSS类对div没有影响

Question

以下是我的CSS文件的一部分以及一些HTML。 有人可以告诉我，当我将class =“ containerHeader selected”（如在测试标题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一个内部 .containerHeader一个内部 div#builderContainer 。 相反，用逗号分隔它们：

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

或者 ，如果您要使其仅应用于同时containerHeader类containerHeader和selected的元素，则在'builderContainer'内部，请删除这两个元素之间的空间。