1

CSSLESSを使用しているサイトがあります。CSSの一部をオーバーライドするために、少しcssの特異性を追加するように言われました。

私は持っています：<div class="rt-bg2">私のコードに。

私はfirebugで見つけたこのCSSスタイルを持っています：

.main-bg-blue .rt-bg2 { background-image: url("../images/backgrounds/blue/top-bg-texture.png"); }

この画像を出力する設定を上書きしたい。したがって、cssの特異性を追加する必要があることを理解しています。私はそれについての記事を読み、それがどのように機能するかを理解していると信じていますが、オーバーライドを機能させることはできません。

誰かが私に、例として、上記のコードにcssの特異性を追加する方法を教えてもらえますか？

Thx Regin

（ところで、私はrockettheme.comのテンプレートを使用しています。ここでは、LESSファイルのオーバーライドは、元のファイルをオーバーライドする必要のあるコードが配置されているcustom.cssファイルの作成によって行われます。）

4

3 に答える 3

1

あなたがそれに飛び込む前に、あなたは間違いなく最初にこれらの記事を読むべきです。

特異性についてのアンディ・クラーク

特異性に関するHTML犬

コードに基づく基本的な例。フィドルの例

<div id="grandparent">
    <div class="main-bg-blue">
        <div class="rt-bg2">&nbsp;</div>
    </div>
</div>


div {width:100px; height:100px} /* let us see the div how we want */



     #grandparent .rt-bg2 { background-image: url("http://dummyimages.com/100x100/000000/ffffff.png&text=dolor"); }
    .main-bg-blue .rt-bg2 { background-image: url("http://dummyimages.com/100x100/000000/ffffff.png&text=ipsum"); }
    /* .rt-bg2 { background-image: url("http://dummyimages.com/100x100/000000/ffffff.png&text=lorem"); } */

既存のコードにクラスまたはIDを追加せずに、新しいルールが例の古いルールを上書きすることを確実にするには、私の例のID「grandparent」またはクラス「grandparent」のような親要素を見つけて、それを使用してルールを設定する必要があります。クラスまたはIDが含まれています。

ただし、IDはクラスよりも特異性が高くなります。

#grandparent .main-bg-blue .rt-bg2 { background-image: url("http://some-other-image-or-similar"); }

もちろん、これはそれを行う1つの方法です。それは本当にあなたのhtmlコードなどに依存します。

于 2013-02-11T03:49:44.200 に答える
0

追加してみませんかstyle="background-image: url("whatever");"

後class="rt-bg2" ？

于 2013-02-11T03:29:13.927 に答える
0

追加してみませんか

.main-bg-blue .rt-bg2 {
    background-image: url("<url of your image>");
}

グローバルに適用する場合は、カスタムcssファイルに追加します。

または

"> `rt-bg2-specialのような要素にlikeを追加し、カスタムcssファイルに以下を追加します<div class="rt-bg2 rt-bg2-special

.main-bg-blue .rt-bg2.rt-bg2-special {
    background-image: url("<url of your image>");
}
于 2013-02-11T03:40:20.067 に答える