クラスセレクタがcssで動作しませんが、idはいくつかのスタイルを追加するために動作します

Question

クラスセレクタをいくつか設定しようとしています。作業が、私はIDセレクタを使用する場合、「＃」は、それがここ

コードに動作されていないものは、IDセレクタがapropiatedされていないので、私は多くのcomoponentsため、そのスタイルを使用したいということです

<style> 
    .activeOption{ 
     color: #fff; 
     background: rgba(255,255,255,0.2); 
     text-decoration: none; 
    } 
</style> 
    <li ><a id="" class="activeOption" href="#" onclick="Javascript : console.log('sisas')">Datos del Cliente</a></li> 

this is what I see when inspect the element

おかげで、誰かが私に

Answer 1

は、他のスタイルがspecificityによるこのスタイルをオーバーライドしていることです。

特異性の問題を解決する最良の方法は、それをオーバーライドするセレクタの特異性を低下させることです。それは常に可能なわけではないので、最後の手段として、クラスを自分自身に連鎖させることによって特異性を高めることができます。

.activeOption.activeOption { 
    [styles] 
} 

必要に応じて何度でもチェーンを行うことができます。チェーンを重ねるほど、より多くの特異性が優先されます。 IDを上書きしようとすると、このメソッドは255のチェーンを必要とするので機能しないことに注意してください。 IDをリファクタリングすることは私のアドバイスです。

You can see how specificity is calculated here.

Answer 2

を助けることができる場合は、あなたのマスターページでのスタイルシートのルート演算子「〜」を使用してみましたか？そのスクリーンショットが言っている何

<link href="~/style.css" type="text/css" rel="stylesheet" />