CSS text-decoration propiedad no puede ser anulado por elemento hijo

Duplicar posibles:
How do I get this CSS text-decoration override to work?CSS text-decoration propiedad no puede ser anulado por elemento hijo

Echa un vistazo a este sencillo ejemplo:

<a href="#"> A <span>red</span> anchor </a>

a { 
    color:blue; 
    font-family:Times New Roman; 
    text-decoration:underline; 
} 

span { 
    color:red; 
    font-family:Arial; 
    text-decoration:none; 
}

Demostración en directo:http://jsfiddle.net/5t9sV/

Como se puede ver en la demo en jsFiddle, el elemento SPAN anula los valores color y font-family propiedad de su elemento antecesor ancla. Sin embargo, la propiedad text-decoration no se anula por alguna razón.

Supongo que algunas propiedades CSS pueden ser anuladas por elementos ancestrales, y algunas otras propiedades CSS no pueden.

¿Es eso así? Y si es así, ¿cómo puedo saber cuáles pueden y no pueden anularse?

Fuente

2010-12-19 Šime Vidas

si observa detenidamente al alternar el subrayado para su clase de tramo, verá que el subrayado cambia. Es solo que el subrayado no se detiene para la etiqueta de anclaje. –

@Stefan, por qué no hacer una respuesta: esa es la solución: el elemento principal es el que se subraya. Uno tendría que finalizar el elemento padre para detener el subrayado. No creo que haya un estilo de "fuerza sin subrayado" –

@Stefan No entiendo a qué te refieres. –

Desde el text-decoration spec:

La propiedad 'text-decoration' en los elementos descendientes no puede tener ningún efecto sobre la decoración del ancestro.

The answer in the linked question cita también (no puedo encontrar este texto en la especificación más sin embargo):

decoraciones de texto en cajas de línea se dibujan a través de todo el elemento, pasando a través de cualquier elementos descendientes sin pagar ningún atención a su presencia.

Y otra cita, CSS3 parece introducir text-decoration-skip, la intención de hacer frente a esta mediante la aplicación de la propiedad en el descendiente (en su caso, <span>):

Esta propiedad especifica qué partes del contenido del elemento cualquier decoración de texto que afecte al elemento debe omitirse. Controla todas las líneas de decoración de texto dibujadas por el elemento y también cualquier línea de decoración de texto dibujada por sus antepasados.

Fuente

2010-12-19 02:45:09 BoltClock

Sí, lo entiendo ahora . Pensé que la línea debajo del elemento SPAN le pertenece, pero no es así. El elemento ANCHOR "posee" toda la línea, lo que significa que el elemento SPAN no puede manipularlo. –

@ Šime Vidas: Sí, que es también la razón por la cual el subrayado continúa en azul. – BoltClock

Por favor, véase [esta prueba] (http://jsfiddle.net/F3Grr/8/), demostrando que el 'texto decoration' de un antepasado siempre se aplica y se acumula junto con cualquier texto'-decoration' de los niños. Establecer el valor en 'none' para un niño tristemente no anula ningún valor 'heredado', sino que es como agregar cero a un número existente. – Phrogz

Como sugiere Pekka, aquí está mi respuesta:

La decoración del texto se pone cambiado cuando se establece el valor de texto-decoración. El problema es que, dado que el elemento primario (el anclaje) rodea el tramo, parece que el tramo está siendo subrayado.

Esto se hace obvio si configura el texto-decoración del tramo en verdadero, porque hace que el subrayado sea azul solo para el tramo.

Fuente

2010-12-19 06:28:08

Pensé que este era el caso también; sin embargo, como se muestra en [esta prueba] (http://jsfiddle.net/F3Grr/8/) la propiedad de decoración de texto de un ancestro siempre se aplica a los niños anidados, junto con lo que especifiquen. – Phrogz

CSS text-decoration propiedad no puede ser anulado por elemento hijo

Respuesta

Cuestiones relacionadas