Переопределение стиля ссылок - PullRequest
Новая
       2

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

1 голос
/ 04 ноября 2011

Мой 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, похоже, игнорируются, они всегда принимают стиль по умолчанию.

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

Ответы [ 3 ]

1 голос
/ 04 ноября 2011

Это ваш код 

#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 голос
/ 04 ноября 2011

Это 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/

1 голос
/ 04 ноября 2011

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

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