web-dev-qa-db-ja.com

css ".class"全体が！importantとして特定性を持つことができますか？

私はjQuery UIウィジェットで頻繁に作業しており、回避する必要がある見落としのために、テーマ設定が困難になっています。

この問題を考えてみましょう：

<div id="node" class="ui-widget">
    <div class="ui-widget-content">
    </div>
</div>

次に、このjquery

<script>
 $(function() { 
       $('#node').hover(function (){
           $(this).toggleClass("ui-state-error");
       });
 }); 
</script>

入れ子にされたdivにとってui-state-errorが！これは疑似コードですが、コンテナにcssスワップがあり、子（基本的に）がそれを無視している場合に発生する大きな例を見つけました。さらに悪いのはこれです。jQueryで上書きできるようにしたい場合は、「backgroundcolor = ui-state-error：background-colorが100％であることを認識しているので、「認識」していないため、すべてがバラバラになります。必然的に、その背景は問題の要素にとって重要なものであるということです。

ここでポイントのケースのフィドルです http://jsfiddle.net/WCuYH/1/

編集回答を試みたことはなく、元の投稿のエッセンスからのドリフトが多すぎるため、この質問を閉じることをお勧めします

jquerycssclasscss-specificity
21
MacLovin

まず、!importantは、CSSルールの特定の1つの宣言に適用されます。クラスには適用されません。したがって、「いいえ」でクラスを作成することはできません!important。

次に、!importantはCSS固有性の一部にすぎません。他の方法を使用して、ルールを優先するためのより具体的なルールにすることもできます（クラスだけでなく、親チェーン内のIDを参照するなど）。CSSを記述しているとき、！importantを使用することが最後の選択肢です-オーバーライドを他の具体的なソリューションで解決したいのですが、通常、すべてのCSSを制御している場合、!importantの使用を避けるのは簡単です。制御していないCSSをオーバーライドする必要がある場合は、時にはそれは便利です。

JQueryコードがオブジェクトのクラスを切り替える場合は、CSSルールを作成して、このクラスの追加/削除によって適切なCSS宣言が優先されるようにする必要があります。その部分をさらに支援するために、HTMLとCSSの両方の関連部分を提示する必要があります。そうすれば、優先順位/特異性の問題を解決する方法についてアドバイスできます。

18
jfriend00