为什么这个css选择器不起作用？

Question

我有以下代码（由Drupal生成;我无法控制它。）

<div class="spacer">
    <div class="region region-home-ad-banner">
        <div id="block-views-banner-ad-block-block" class="block block-views  contextual-links-region">
            <div class="contextual-links-wrapper">
                <ul class="contextual-links">
                    <li class="views-ui-edit first">
                        <a href="/banner_ad_block/edit/block?destination=node">Edit view</a>
                    </li>
                    <li class="block-configure last">
                        <a href="/banner_ad_block-block/configure?destination=node">Configure block</a>
                    </li>
                </ul>
            </div> <!-- end contextual-links-wrapper -->

            <div class="content">
                <div class="view view-banner-ad-block view-id-banner_ad_block view-display-id-block view-dom-id-542147d83a500d1c31244e2e2a583562">
                    <div class="view-content">
                      <div class="views-row views-row-1 views-row-odd views-row-first views-row-last">
                        <div class="views-field views-field-field-ad-image">
                            <div class="field-content">
                                <a href="http://www.externallink.com" target="_blank">
                                    <img src="expo-home-page-banner.jpg" width="912" height="100" alt="" />
                                </a>
                            </div>
                        </div>
                      </div>
                    </div>
                </div>
            </div> <!-- end content -->
        </div> <!-- end block-views-banner-ad-block-block -->
    </div> <!-- end region-home-ad-banner -->
</div> <!-- end spacer -->

我有这个css有效：

.spacer img{
    background: #ffffff;
    border:5px;
    margin-left: 0px;
    padding-top: 30px; 
    padding-bottom: 20px; 
}

我需要使用类“region-home-ad-banner”将背景样式应用于div，所以我尝试了这个：

.spacer>div.region-home-ad-banner {
    background: #ffffff;
}

根据Firebug，该选择器根本没有应用。它没有被优先级更高的东西覆盖，它根本就没有发生。

为什么.spacer img会找到它需要的内容，即使img标记被隐藏在多个级别中，但是.spacer>div.region-home-ad-banner找不到.spacer的直接子节点？

已编辑添加SCREENSHOT

Answer 1

这可能是由于以下几个原因造成的：

<强>缓存：

在firebug中打开CSS选项卡，选择CSS文件，并确保CSS中有该规则。 在这种情况下，清除缓存（有时 CTRL + F5 是不够的）并重试。

<强>错字：

确保没有任何拼写错误，在firebug中打开控制台并检查警告。或者在Firefox中打开Error Console。 （工具 - ＆gt; Web开发人员 - ＆gt;错误控制台） 它可能是先前规则的拼写错误，例如，忘记放置一个结束的大括号（}）将违反以下规则。

Answer 2

从drupal生成的HTML结构和您尝试使用的相当独特的类看起来您不需要直接后代选择器“＆gt;”并且可以尝试不使用它：

.spacer div.region-home-ad-banner {
    background: #ffffff;
}

但是我没有理由认为选择器不起作用。