Переопределение стиля ссылки

#html #css #stylesheet

#HTML #css #таблица стилей

Вопрос:

Мой CSS выглядит так:

 A:link { text-decoration: none; color: White; border-bottom:1px dotted white; font-style:italic;}
A:visited { text-decoration: none; color: White; border-bottom:1px dotted white; font-style:italic;}
A:active { text-decoration: none; color: White; border-bottom:1px dotted white; font-style:italic;}
A:hover { text-decoration: none; color: white; border-bottom:1px solid white; font-style:italic; }

#mainmenu A:link { text-decoration: none; }
#mainmenu A:visited { text-decoration: none; }
#mainmenu A:active { text-decoration: none; }
#mainmenu A:hover { text-decoration: underline; color: white; }

и в HTML у меня есть:

 <div id="mainmenu">
   <a href="link here">link</a>
</div>

Я бы подумал, что этот элемент меню будет иметь стиль без оформления текста, но вместо этого он получает подчеркнутый стиль. Таким образом, стили для #mainmenu, похоже, игнорируются, он всегда принимает стиль по умолчанию.

Я что-то упустил?

1. В каком браузере вы это просматриваете?

2. firefox 7, но в IE то же самое

3. #id стили имеют приоритет над .class стилями, которые имеют приоритет над a стилями объектов. Возможно, вы захотите узнать о каскадной части каскадных таблиц стилей 🙂

4. @Set Это не объясняет проблему, с которой он столкнулся, так как он ожидает, что #id будет предшествовать, но проблема в том, что он не видит, как это происходит. Он кажется мне достаточно образованным.

5. мой стиль mainmenu наследует базовый стиль, поэтому мне пришлось специально поместить border-bottom:none; в мое главное меню, чтобы оно не использовало базовый стиль…

Ответ №1:

Это http://jsfiddle.net/CU9RH/1 / демонстрирует, что для ссылки #mainmenu нет подчеркивания, но есть нижняя пунктирная граница.

Вам нужно будет переопределить нижнюю границу, если вы хотите, чтобы она не отображалась:

 #mainmenu A:link { text-decoration: none; border-bottom:none;}
#mainmenu A:visited { text-decoration: none; border-bottom:none;}
#mainmenu A:active { text-decoration: none; border-bottom:none;}

Демонстрация с исправлением: http://jsfiddle.net/uYhtw/1 /

Ответ №2:

Любопытно, что CSS чувствителен к регистру (по крайней мере, с именами классов и идентификаторами), и, насколько мне известно, это было бы и с «собственными элементами», но в любом случае вы можете переопределить стили, используя !important ключевое слово:

 #mainmenu a:link { text-decoration: none !important; }

1. Следует отметить, что чувствительность к регистру зависит от doctype и браузера. Типы документов XML или XHTML будут учитывать регистр символов. Вам нужно будет прочитать о других потенциальных типах документов, поскольку я не уверен 😉

2. @PaulZaczkowski Хорошая мысль и да, определенно стоит провести исследование.

Ответ №3:

Это ваш код

 #mainmenu A:hover { text-decoration: underline; color: white;  }

A:hover { text-decoration: none; color: white; border-bottom:1px solid white; font-style:italic; }

Вы #mainmenu устанавливаете подчеркивание и цвет, чтобы оно не игнорировалось, если вы хотите, чтобы в #mainmenu не было подчеркивания, тогда вам нужно изменить свой код на

 #mainmenu A:hover { text-decoration: none; color: white; border: 0; }

A:hover { text-decoration: underline; color: white; border-bottom:1px solid white; font-style:italic; }

1. Это состояния, отличные от наведения, для которых OP хочет подавить оформление текста.

2. @Mr.Disappointment Я вводил код OP так, как он у него был. Отображение ошибки, и я еще не закончил ее редактирование