html - 別のルールが変更できないようにCSSルールを制御することは可能ですか？

Question

例えば：

あなたはこれを持っています：

<style type="text/css">
.myrule {
  font-weight:bold;
}
</style>
<div class="myrule">
  This text will bold but 
</div>


<style type="text/css">
.myrule {
  font-weight:normal; /* This code will affect the original .myrule */
}
</style>

この例のようにCSSルールを「ロック」できるかどうかを知る必要があります。

<style type="text/css">
.myrule:locked {
  color:yellow;
}
</style>
<div class="myrule">
   This text will yellow always!!!!!!!
</div>

<style type="text/css">
.myrule {
  color:red;
}
</style>

Answer 1

必ずしも。演算子を使用して、!important他のほとんどすべてをオーバーライドする極端な重みを CSS ルールに追加できます。ただし、演​​算子を含むより具体的な別のルールは、!important引き続きそれをオーバーライドします。

あなたの最善の策は、CSS ルールを「ロック」しようとするのではなく、ルールのセレクターが常に他のものよりも具体的であることを実際に確認することです。ID セレクターは特異性を支配する優れた方法であり、この方法で遭遇する問題ははるかに少なくなります。

Answer 2

cssの解釈はブラウザによって違うと思います。CSS の優先順位をオーバーライドしたい場合は、javascript を使用して明示的に意図を述べる必要があると思います。

Answer 3

次のように、DIV タグの ID を定義できる場合

<div class="myrule" id="firstdiv">
   This text will yellow always!!!!!!!
</div>

次に、ID固有のCSSルールを次のように指定できます

<style type="text/css">
#firstdiv .myrule {
  color:yellow;
}
</style>

Answer 4

これを試して ：

.myrule {
  font-weight:bold !important;
}