Почему мой цвет переопределяется с помощью 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 верно, то 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; },

Вы можете использовать следующую формулу для расчета специфичности: +100 для идентификатора, +10 для класса, +1 для тега.

Что делает .tabs li a стоит 12 (класс (10) + тег (1) + тег (1)) VS .selected, который только 10. Если вы сделаете это .tabs .selected вместо этого он будет стоить 20 (класс (10) + класс (10)) и поместит его выше значения по умолчанию.