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 imgimg タグが複数のレベルに埋め込まれているにもかかわらず、必要なものを見つけるのはなぜですか?.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 に答える