0

我有以下代码（由 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没有找到 div 的直接子级.spacer？

编辑添加屏幕截图

在此处输入图像描述

4

2 回答 2

1

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

缓存：

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

错字：

确保您没有任何拼写错误，在 firebug 中打开控制台并检查警告。或者Error Console在 Firefox 中打开。（工具--> Web 开发人员--> 错误控制台）这可能是上一条规则的拼写错误，例如，忘记放置右大括号 ( }) 将破坏您的以下规则。

于 2012-08-01T14:50:34.600 回答
0

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

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

但是，我看不出为什么该选择器不起作用。

于 2012-08-01T16:11:15.097 回答