CSS: не удалось переопределить унаследованное свойство украшения текста

Question

Я собираюсь использовать такую ​​таблицу CSS для моего меню:

.menu {text-decoration:underline;}
.menu a:link {text-decoration:none; color:#0202C0}
.menu a:active {text-decoration:none; color:#0202C0}
.menu a:visited {text-decoration:none; color:#0202C0}
.menu a:hover {text-decoration:underline; color:#0099FF}

но при попытке применить его к документу

<span class="menu">
   Some underlined text came here... 
   <a href="...">this text should not be underlined until mouse on!</a>
</span>

Я обнаружил неожиданное поведение: текст ссылки всегда остается подчеркнутым. Что я делаю не так? Может ли это зависеть от браузера (я использую Mozilla Firefox 3.5.6, возможно, IE 6.0 отображает его правильно)? Если да, то как я могу полностью полагаться на CSS? Что я должен использовать, чтобы заменить его?

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

Answer 1

После быстрой игры с некоторыми CSS, обходной путь (который ужас , но работает) должен сделать следующее в вашем CSS:

.menu span {text-decoration:underline;}

... вместо первой строки вашего образца CSS. Затем в HTML сделайте следующее:

<span class="menu">
    <span>Some underlined text came here...</span>
    <a href="...">this text should not be underlined until mouse on!</a>
    <span>Some more underlined text came here...</span>
</span>

Это далеко не идеально, но это лучшее, что я могу придумать на данный момент.

Answer 2

Убедитесь, что это действительная ссылка внутри href. Если вы не поставите этот стиль:

.menu a, .menu a:link{my styles}

и href не имеют содержимого, некоторые браузеры не будут воспринимать его как ссылку и будут выполнять рендеринг текста по умолчанию. Например, <a href=""> не будет принимать стиль .menu a:link, он перейдет к стандартным стилям .menu, потому что нет ссылки и он не отображается как таковой в некоторых браузерах.

Конечно, закройте свои базы, включив в свой селектор голые a.

Кроме того, убедитесь, что для правильного синтаксиса CSS эти цветовые стили заканчиваются точкой с запятой.

Answer 3

Для текста, который вы хотите подчеркнуть, используйте <u>blabla</u> (сделайте это HTML-способом). Это не будет наследоваться, и ваша следующая ссылка не будет подчеркнута.

Answer 4

Вы пробовали добавить:

.menu a {text-decoration:none}

до всех остальных правил? Просто чтобы установить значение по умолчанию, которое затем переопределяется правилом a:hover.