Лучший способ скрыть определенный класс, у него есть определенное имя

Question

Кажется, что скрыть элемент можно 500 способами. Я смотрю, что лучше для стандартов совместимости браузера и, возможно, даже производительности ...

Вот что я хочу скрыть:

<li class="header-menu-user"><a class="header-user" href="/Settings/User/UserProfile">User Settings</a></li>

То, что я пробовал в прошлом, было для другого сценария, в котором я сделал отображение: ни один в li с атрибутом данных и т. Д.

Я просто попытался сделать это, и он не работает (не скрывая его)

.header-user {
    display: none;
}

Answer 1

Есть много способов, но обычно подходит один из этих двух:

display: none;

Будет скрывать элемент, то есть окружающие элементы будут игнорировать его, как если бы он не был в DOM, даже если он есть иВы все еще можете нацеливаться на него.

opacity: 0;

По существу сделает элемент прозрачным, невидимым, но он все еще занимает место в различных моделях макетов.

Answer 2

Вы можете скрыть определенный тег <a> следующим образом:

li.header-menu-user a[href^="/Settings"] { display: none; }

Answer 3

С использованием только CSS Display:none; было бы правильным.Единственное влияние, которое это оказывает на производительность, заключается в том, что вы по-прежнему отправляете весь контент, который скрыт в браузере клиента.Если вы хотите повысить производительность, возможно, рассмотрите возможность удаления контента на стороне сервера, если это вариант для вас.