为什么我的颜色被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））并将其放在默认值以上。