Роли пользователя и специфичность CSS - Могу ли я использовать! Важно? ⇐ CSS

[Anonymous]

Я использую CSS, чтобы скрыть определенные элементы от пользователя, если он не должен видеть его с классом только для администратора . Если пользователь является администратором, мой JavaScript проходит все элементы только для администратора и добавляет класс Show-Admin-vis , которые мой CSS поднимает и удаляет дисплей: none; он изначально наносил их. Проблема возникает, когда другие стили с более высокой специфичностью применяются к этим элементам только администратора , которые переопределяют дисплей: None; стиль, где вместо этого они не должны до тех пор, пока не будет применен класс Show-Admin-vis . У меня есть большой проект, и ниже-лишь минимально воспроизводимый пример, поэтому я не хочу кропотливо писать: не (. Admin Only: Not (.show-admin-vis)) на каждом стиле, который может повлиять на мои элементы . Я не использую эти классы, чтобы скрыть действительно важную информацию, пользователи, пытающиеся просматривать элементы только для администратора через Devtools, ничего не увидят, потому что они на самом деле не будут заполнены/пригодны для использования, если они не должны его увидеть. Это просто для того, чтобы скрыть элементы, потому что они все еще могут покинуть пробелы от прокладки и поля.

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

const adminOnlyElements = Array.from(document.getElementsByClassName("admin-only"));

setAdmin(false);

function setAdmin(isAdmin) {
if (isAdmin) adminOnlyElements.forEach(x => x.classList.add("show-admin-vis"));
else adminOnlyElements.forEach(x => x.classList.remove("show-admin-vis"));
}< /code>
#topnav {
display: flex;
width: 100%;
background-color: #DDDDDD;
gap: 10px;
}

#topnav a {
display: flex;
justify-content: center;
align-items: center;
}

.admin-only:not(.show-admin-vis) {
display: none; /* Adding !important here fixes the issue, but is that what I should be doing? */
}

#control-panel {
position: absolute;
bottom: 0;
left: 50%;
translate: -50% -100%;
}< /code>

[url=#home]Home[/url]
[url=#admin-dashboard]Admin Dashboard[/url]

Normal text :)
Admin should be the only ones viewing this!

I'm an admin!
I'm a normal user!
< /code>
< /div>
< /div>
< /p>
Проблема выше заключается в том, что «панель администратора» видна в топнаве, даже если пользователь не является администратором. Должен ли я использовать Easy! Wating 

флаг? Есть ли другое решение, о котором я не думаю?

Подробнее здесь: https://stackoverflow.com/questions/796 ... -important