divをオーバーライドするにはどうすればよいですか？

Question

私は、これはDIV持っているの一環として、罰金含まれます：

.connier { 
     text-align: left; 
     padding-top: 5px; 
     padding-bottom: 10px; 
     padding-left: 10px; 
     background-color:#CCC; 
} 

をので、それを使用する：透明で、別のページ上のファイルが、この時間は含ま

<div id="connier"> 
    <!--#include virtual="/cover/cover.asp" --> 
</div> 

しかし、私は同じ使用したいです背景は同じですが、背景は同じです。ここで

は私が間違って何をやっている

.connier.the_otherbg { 
     text-align: left; 
     padding-top: 5px; 
     padding-bottom: 10px; 
     padding-left: 10px; 
     background-color:transparent; 
} 

<div class="the_otherbg"> 
    <!--#include virtual="/cover/rents.asp" --> 
</div> 

を試みた何ですか？

事前のおかげ

Answer 1

をそれをクリア

希望はこれにあなたのCSSを変更し

：

.the_otherbg { 
     background-color:transparent; 
} 

は、それが.connier後に定義されていることを確認すること。また、あなたのdivは、両方のクラスを持っていることを確認する必要があります。

<div class="connier the_otherbg"> 
    <!--#include virtual="/cover/rents.asp" --> 
</div> 

the_otherbg div要素がconnierに変更を継承するよう、私はそれをこのように行うだろう。それらの間で異なるものだけを定義してください。将来、何かを変更する必要があるときは、それを1つの場所で行う必要があります。

デモ：http://jsfiddle.net/CF88G/

Answer 2

でたくさんまあ、私はあなたがそのIDでマークされたdiv要素をターゲットにclassセレクタを使用している場合は、最初の1がどのように動作するかを知るのが大好き、それを気にしないだろう。

第2のセレクタは、クラスconnierとthe_otherbgの両方をターゲティングする要素をターゲティングしますが、ターゲットにする要素はthe_otherbgです。セレクタから.connierを削除するだけです。

Answer 3

私はあなたが何をすべきすべてはこのだと思う：

.connier { 
     text-align: left; 
     padding-top: 5px; 
     padding-bottom: 10px; 
     padding-left: 10px; 
     background-color:#CCC; 
} 

.transparent 
{ 
    background-color: transparent!important; 
} 

ない場合は透明のクラスは、他のクラスの下に見出されることが重要であるので、我々は、カスケーディングスタイルシート（CSS）を使用して作業している忘れないでください、 '！important'を使用してください（これは頻繁に使うべきではありません！）。

divに 'class ='属性が使用されていることにも注意してください。

<div class="connier"></div> 

と「ID」を使用してのdivにいくつかのCSSをバインドするには、そのクラスは「#myDivId」（私の意見では、これはあまり使用可能である）あなたの通常のdivの使用のために

ようにする必要がありますあなたの他のdivの使用のために：

<div class="connier transparent"></div> 

あなたのCSSがはるかに使いやすく、保守することができます。この方法（divが同時に2つのクラスがあります）。これはビット