css - 为什么使用 css-modules 覆盖了我的颜色？

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为真时，则s.selected应用于元素。在这种情况下，coloris 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，class +10，tag +1。

这使得.tabs li a价值 12 (class(10) + tag(1) + tag(1)) VS .selected，只有 10。如果你这样做.tabs .selected，它将值 20 (class(10) + class(10)) 和会将其置于默认值之上。