爲什麼我的顏色被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正在覆蓋它。我必須將!important添加到white以使其成爲color。我對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，class爲+10，tag爲+1。

這使得.tabs li a值得12（類（10）+標籤（1）+標籤（1））VS .selected，這是隻有10.如果使其.tabs .selected代替，這將是值得20（類（10） + class（10））並將其放在默認值以上。