CSS: No se pudo invalidar heredado la propiedad text-decoration

Question

Voy a utilizar dicha tabla CSS para mi menú:

.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} 

pero al tratar de aplicarla al documento

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

I encontró un comportamiento inesperado: el texto del enlace siempre permanece subrayado. ¿Qué estoy haciendo mal? ¿Podría depender del navegador (estoy usando Mozilla Firefox 3.5.6, probablemente IE 6.0 lo muestre correctamente)? Si es así, ¿cómo puedo confiar en CSS? ¿Qué debería usar para sustituirlo?

(De hecho normalmente yo nos aprendido nuevos lenguajes de programación muy rápidamente y nunca tuvimos ningún problema con bases de programación hasta que empecé a HTML y CSS. O yo soy incompatible con ella o sus características nunca fue contado lo suficientemente bien.)

Answer 1

después de una jugada rápida con un poco de CSS, una solución (que es horrible , pero hace el trabajo) sería hacer lo siguiente en su CSS:

.menu span {text-decoration:underline;} 

... en lugar de la primera línea de su muestra CSS. Luego, en el código HTML haga lo siguiente:

<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> 

Está lejos de ser perfecto, pero es lo mejor que puedo llegar a por el momento.

Answer 2

Ha intentado añadir:

.menu a {text-decoration:none} 

antes de todas las otras reglas? Solo para establecer un valor predeterminado que luego se reemplaza por la regla a:hover.

Answer 3

Asegúrese de que es un enlace válido dentro de la href. Si no se proporciona este estilo:

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

y la href tiene ningún contenido, algunos navegadores no tratarlo como un enlace y no por defecto representación de texto. Por ejemplo, <a href=""> no tomará el estilo de .menu a:link, irá a los estilos predeterminados .menu porque no hay ningún enlace y no se representa como tal en algunos navegadores.

Por supuesto, cubra sus bases incluyendo a en su selector.

Además, asegúrese de finalizar esos estilos de color con punto y coma para la sintaxis correcta de CSS.

Answer 4

Para el texto que desea subrayar, use <u>blabla</u> (hágalo de la manera HTML). Esto no heredará y su próximo enlace no aparecerá subrayado.