3

CSSセレクターの重要なプロパティ値を重要でないものにすることは可能ですか?

例: Bootstrap 3 は.hideクラスを次のように定義します。

 .hide { display: none !important; }

BS3 のソース コードを変更せずに重要な値を削除することはできますか?

何かイイケで考える

 .hide { display: none !remove-important; }

同じ値を維持したいことに注意してください！それは正しくないので、クラスに設定block !importantしたくありません....hide

すでに新しいクラス.hide-non-importantを追加し、必要な場所で使用しました。

 .hide-not-important { display: none; }

...しかし、問題は次のとおりです。これに代わるものはありますか?

4

5 に答える 5

3

元のソース コードを編集する必要はありません。スタイルシートを作成して Bootstrap スタイルシートの後に配置し、これを追加するだけです。

 .hide { display: block !important; }

さて、これを言ったので、私はこれを行うことに非常に注意を払います. サイト全体でこのクラスを適用した要素の数がわからないため、ほぼ確実に予期しない結果が得られます。

このクラスが適用されたのには明らかに理由があります。次のいずれかをお勧めします。

  1. これをしないでください

  2. 要素に他のクラスを追加し、それにスタイルを追加します。マークアップを次のように調整します (または、必要に応じて js を使用してクラスを適用します)。

    <div class="hide custom-hide-reset"></div>

    次に、作成したスタイルシートにこのスタイルを追加します。

    .custom-hide-reset { display: none; }
于 2013-09-19T15:55:54.130 に答える
1

これを次のように上書きできます。

 body .hide { display: none !important; }

 .someclass.hide { display: none !important; }

これらの 2 つの例のほうが優先度が高い

于 2013-09-19T15:55:43.887 に答える
1

!important次のような別のもので現在の値をオーバーライドできます

.col{ color:red !important; }
.col{ color:green; } // wont work
.col{ color:blue !important; } // will work and set color blue instead of red

デモ。

アップデート ：

この質問は問題ではありませんJavaScriptが、代替手段として、これらの手法を使用してタスクを達成し、使用してルールを削除してJavaScriptから、新しいルールを再度追加することができます。

function getCSSRule(ruleName, deleteFlag) {               
   ruleName=ruleName.toLowerCase();                       
   if (document.styleSheets) {                            
      for (var i=0; i<document.styleSheets.length; i++) { 
          var styleSheet=document.styleSheets[i];          
         var ii=0;                                        
         var cssRule=false;                               
         do {                                             
            if (styleSheet.cssRules) {                    
                cssRule = styleSheet.cssRules[ii];         
            } else {                                      
                cssRule = styleSheet.rules[ii];            
            }                                             
            if (cssRule)  {                               
                if (cssRule.selectorText.toLowerCase()==ruleName) { 
                    if (deleteFlag=='delete') {             
                        if (styleSheet.cssRules) {           
                            styleSheet.deleteRule(ii);        
                        } else {                             
                            styleSheet.removeRule(ii);        
                        }                                    
                        return true;                         
                    } else {                                
                    return cssRule;                      
                }                                       
            }                                          
        }                                             
        ii++;                                         
        } while (cssRule)                                
      }                                                   
   }                                                      
   return false;                                          
}                                                         

function killCSSRule(ruleName) {                          
    return getCSSRule(ruleName,'delete');                  
}                                                         

function addCSSRule(ruleName, v) {                        
    if (document.styleSheets) {                            
        if (!getCSSRule(ruleName)) {                        
            if (document.styleSheets[0].addRule) {           
                document.styleSheets[0].addRule(ruleName, v,0);
            } else {                                         
                document.styleSheets[0].insertRule(ruleName+'{'+v+'}', 0);
            }                                                
        }                                                   
    }                                                      
   return getCSSRule(ruleName);
}
// Check the rule before deleting
console.log(getCSSRule('.col')); // .col { color:red !important; }
// At first remove the current rule
killCSSRule('.col');
// Now assign nre rule
addCSSRule('.col', 'color: red');
// Check the rule after deleting
console.log(getCSSRule('.col')); // .col { color:red; }

デモ。( ソース : Javascript を使用した Totally Pwn CSS )

于 2013-09-19T15:56:36.740 に答える