Как сделать ссылку не наследующей свойства?

Так что я даже не знаю, как это сформулировать, но попробую.

На моем сайте слева есть панель навигации. Элементы абзаца и ссылки оформлены в CSS. Теперь у меня есть одна ссылка на панели навигации с уникальным идентификатором (единственным), который я не хочу наследовать от CSS панели навигации.

Это выглядит примерно так:

<nav id="leftbar">   <a href="link" id="special" onclick="function()"></a>   <p>Navigation area 1</p>     <a href="index.html">Home</a>     <a href="link">Link 1</a>     <a href="link">Link 2</a>     <a href="link">Link 3</a>     <a href="link">Link 4</a> </nav> 

Итак, левая панель оформлена в CSS как nav#leftbar. <p> стилизован как nav#leftbar p. Ссылки оформляются как nav#leftbar a и nav#leftbar a:hover. Теперь я добавил новый блок в свой CSS, используя #special. Но поскольку это элемент ссылки и он находится внутри тегов панели навигации, он по-прежнему наследует все свойства от nav#leftbar a.

Есть ли способ изменить это, или мне нужно переместить ссылку со «специальным» идентификатором за пределы тегов панели навигации? Я бы предпочел не делать этого, поскольку это часть панели навигации, просто другая.

Я также попробовал добавить свойства CSS nav#leftbar a к #special и измените их, чтобы перезаписать, но приоритет все равно будет nav#leftbar a.

Вы можете использовать :not() псевдокласс для исключения связи с special идентификатор:

nav#leftbar a:not(#special) {   color: red; }  #leftbar a:not(#special):hover {   color: gold; }

<nav id="leftbar">   <a href="link" id="special" onclick="function()">Special</a>   <p>Navigation area 1</p>     <a href="index.html">Home</a>     <a href="link">Link 1</a>     <a href="link">Link 2</a>     <a href="link">Link 3</a>     <a href="link">Link 4</a> </nav>

Проблема в том, что nav#leftbar a гораздо более конкретен, чем #special. Первый содержит один идентификатор и два тега, второй — только один идентификатор.

я бы поменял идентификатор leftbar в класс leftbar а также удалите имя тега перед ним в CSS, чтобы вы могли настроить таргетинг .leftbar a и .leftbar p. Затем #special является более конкретным, поскольку содержит идентификатор. (Классы более значимы, чем теги, а идентификаторы более значимы, чем классы.)

Если ты это знаешь #special всегда является первой записью #leftbar, вы также можете настроить таргетинг на него, используя что-то вроде #leftbar a:first-child, без необходимости идентификатора.