なぜ私の色はcss-modulesを使ってオーバーライドされていますか？

Question

css-modulesを使用しているときに私の色が私のCSSでオーバーライドされている理由を理解しようとしています。ここに私のjsxです：

let tabLink = className({ 
    [s.selected]: selectTab 
}); 

<li className={s.tabs}> 
    <a className={tabLink}>{tab.translation}</a> 
</li> 

そして、ここではCSS次のとおりです。

.tabs { 
    color: #454545; 
} 
.tabs li { 
    display: inline-block; 
    font-size: 11px; 
} 
.tabs li a { 
    color: #454545; 
    cursor: pointer; 
    text-decoration: none; 
} 
.selected { 
    background: url('../../images/header_nav_on.gif') top left repeat-x; 
    color: white; 
} 

selectTabが真であるときに、その後、s.selectedが要素に適用されます。この場合、colorはwhiteですが、要素には適用されません。 .tab li aで定義されているcolorがそれを上書きしています。私はそれをcolorにするために!importantをwhiteに加えなければならない。 cssまたはcss-modulesについて何を理解していないのですか？

Answer 1

.tabs li aは、.selectedより具体的です。 .selectedにデフォルトを上書きする場合は、.tabs .selected { background: url('../../images/header_nav_on.gif') top left repeat-x; color: white; }を試してください。

次の数式を使用して、特異度を計算できます。idは+100、クラスは+10、タグは+1です。あなたはそれ.tabs .selected作る場合は代わりに、それは20（クラス（10）価値があるだろう（（1）+タグ（1）クラス（10）+タグ）のみ10ですVS .selected、.tabs li aは12の価値になり

+ class（10））、デフォルト値を上回ります。