为什么我的颜色会被css-模块覆盖？

Question

当我使用CSS时，我试图理解为什么我的颜色会在css-modules中被覆盖。这是我的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为true时，则将s.selected应用于元素。在这种情况下，color是white，但它不应用于元素。在color中定义的.tab li a正在覆盖它。我不得不将!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，类+10，标记+1。

这使得.tabs li a值为12 (class( 10 ) + tag(1) + tag(1))和.selected，后者仅为10。如果将其改为.tabs .selected，则它将值20 (类(10)+类(10))，并将其置于默认值之上。