Один и тот же цвет фона отображается по-разному для элементов на разных уровнях. ⇐ CSS

[Anonymous]

У меня есть тег привязки внутри li, вот так

Код: Выделить всё

[*]
[url=/vis/chemicals]Chemicals[/url]

и у меня есть такие классы стилей

Код: Выделить всё

a.MuiCustomHeaderNavigation {
color: #fff;
line-height: 22px;
letter-spacing: 0.00938em;

&.active {
background-color: rgba(0, 0, 0, .15);
}

@media screen and (max-width: 1199.98px) {
font-size: 14px;
}
}

li:has(a.MuiCustomHeaderNavigation.active) {
background-color: rgba(0, 0, 0, .15) !important;
}

li:has(a.MuiCustomHeaderNavigation) {

&:hover {
background-color: rgba(0, 0, 0, 0.15) !important;
}
}

Как видите, я добавляю цвет фона как к активной привязке, так и к ее родительскому элементу li в rgba(0, 0, 0, .15) , но тем не менее оттенок цвета фона тега привязки немного отличается, из-за чего он выглядит как другой цвет фона.
См. здесь
[![введите описание изображения здесь][1]][1]
Как вы можете видеть, цвет внутреннего прямоугольника, который является тегом привязки, немного отличается от внешнего цвета, который является тегом привязки. li color.
Я даже проверил это в инструменте разработчика, классы применяются правильно, но разница все равно существует.
Что здесь не так?
[1]: https://i.sstatic.net/gFSCxVIz.png

Подробнее здесь: https://stackoverflow.com/questions/790 ... ent-levels