5

id が class よりも優先されることはわかっています。残念ながら、私の html は Drupal によって生成されており、スタイリングが必要な特定の div に id を追加する方法がありません。

これは基本的な簡素化された HTML です (内容を簡潔にするために削除されています)。

<div id="home-blocks-area" class="clearfix">
    <div align="center" id="homepage_speakers">
        <div class="region region-home-speakers">
            <div id="block-speaker-carousel-speaker-carousel" class="block block-speaker-carousel ">
                <div class="content">
                <!-- actual content -->
                </div>
            </div>
        </div>
    </div>
</div>

<div class="content">スタイルシートでその divをターゲットにできるようにする必要があります。問題は、Firebug によると、私のスタイル コードが のスタイルに取って代わられていることです#home-blocks-aread .block .content。これは、この 1 つの div に必要なスタイルとは異なります。 ここに画像の説明を入力

その特定の div を取得するには、どの CSS を使用する必要がありますか?

4

5 に答える 5

5

CSS の特異性が答えです (スタイルがオーバーライドされる理由について)。セレクターの ID は、2 クラス スタイルよりも高い特異性を追加します。

スタイルをより具体的にするか (クラスを追加するか、ルート要素を追加してその値を増やします)、または (前述のように) 現在のスタイルシートよりも重要な ID を作成する必要があります。

を使用することもできますが!important、主な目的がクライアント側のカスタマイズ (アクセシビリティのため) であることを考えると、ハックっぽいと主張する人が多いでしょう。

于 2012-07-11T16:47:17.633 に答える
3

次のように重要度を追加できます。

.region-home-speakers div.content { background: none !important; }

ただし、このようにするのはあまり良い方法ではありません。BoltClockが言うように、CSSを次のように変更します。

#home-blocks-area .region-home-speakers div.content { background: none; }
于 2012-07-11T16:45:53.483 に答える
2

一番上のスタイル{0, 1, 2, 0}のスコアは で、2 番目のスタイルのスコアは です。2 番目のスタイル{0, 0, 2, 1}に ID (#homepage_speakersおそらく?) を追加して、より高い精度にする必要があります。CSS の発生順序は、2 つのスタイルのスコアが同じ場合にのみ重要です。

それか、単に!important2 番目のスタイルに追加するかのどちらかですが、私は適切な CSS 階層を持ちたいので、そうしたくありません。

CSS セレクターのスコアは によって計算され{Is Important 1/0, number of IDs, number of Classes, number of Elements}ます。順序番号が大きいほど、常に優先度が高くなります。たとえば、ID が 1 つのルールは、クラスが 5 つあり、ID がないルールよりも優先されます。

于 2012-07-11T16:50:06.183 に答える
0

いくつかのオプションがあります。おそらく最も簡単なのは、行を #home-block-area... セクションの後に移動することです。CSS は上から下に読み込まれ、下にある要素が上の要素を上書きします。

于 2012-07-11T16:46:24.757 に答える
0

ハックな方法で問題を解決することを余儀なくされているのは残念です...

#home-blocks-aread .block div.content { background: none; }

仕事をするでしょう。

于 2012-07-11T16:47:28.710 に答える