重複する名前にもかかわらず、divクラスがjQueryで別のCSSクラスを使用するように強制しますか？

Question

特定のテキストが含まれているかどうかに基づいて、（クラス名が同じである）他のクラスと異なるクラスのスタイルを設定しようとしています。私はクラスを追加することができましたが、私が直面している問題は、マスターのCSSクラスがそれを無効にしていることです。コードは、表示する：

HTML

<div id="master"> 
    <div> 
     <div class="attributes"> 
      <a href="#">Not important</a> 
     </div> 
    </div> 
    <div> 
     <div class="attributes"> 
      <a href="#">Not important</a> 
     </div> 
    </div> 
    <div> 
     <div class="attributes"> 
      <a href="#">Important Text and Other Stuff</a> 
     </div> 
    </div> 
    <div> 
     <div class="attributes"> 
      <a href="#">Not important</a> 
     </div> 
    </div> 
    </div> 

オリジナルCSS

jQueryの使用

#master div.attributes { 
    float: left; 
    font-size: 12px; 
    margin-top: 0px !important; 
    width: 330px; 
    clear: both; 
} 

.attributes { 
    color: #58585a !important; 
    font-size: 14px; 
    margin: -10px 0 0 !important; 
} 

$('div.attributes:contains("Important Text")').addClass('attributes2'); 

CSSは

.attributes2 

{ 
    clear: none; 
    float: right; 
    font-size: 12px; 
    margin-top: 0; 
    width: 330px; 
} 

だから正常に追加.attributes2を追加しました。しかし#master div.attributes CSSクラスがこれを却下され、それを使用しています。誰もこれを回避する方法を考えることができますか？私は無数のgoogle &スタック検索、幸運なことをした...私はHTML id &クラス名を編集する能力がないと言及する必要があります。しかし、私は& jQueryを編集することができます。

本当にありがとうございます。

Answer 1

あなたはCSSを見てする必要があります

specificity

特異性は 値が要素に最も関連していると、それゆえ、 に適用されるCSSプロパティを決めるブラウザするための手段です。特異性は、さまざまなCSSセレクタの で構成されるマッチングルールに基づいています。あなたはより具体的なCSSセレクタを追加する必要が

Take a look here for more information

。

特異性は、複数の宣言のいずれかに等しい、CSSで見つかった 最後の宣言は、要素に適用される：

は、次のCSSに

#master div div.attributes2{ 
    clear: none; 
    float: right; 
    font-size: 12px; 
    margin-top: 0; 
    width: 330px; 
} 

NOTEを追加します。

Answer 2

これは、ID #masterがクラス.attributes2よりも高い優先度を持つために発生しています。これは、specificityです。だから、この問題を解決するために、あなたは自分の.attributes2ブロックに多くの特異性を追加することができます。

#master div.attributes2 { 
... 
} 

も!importantルールが中断するので、あなたが!importantルールを使用するのではなく、あなたの.attributesブロックと同じことを行う必要があることに注意してくださいCSSのカスケード性があり、コードを維持するのが難しくなります。