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'內部，請刪除這兩個元素之間的空間。