2009-07-17 26 views
23

Aquí está mi código: parte css¿cuándo la etiqueta "a" no heredará el atributo de color de la etiqueta principal?

.blue { 
    color:#6E99E1; 
    font-size:9px; 
} 

parte de marcas

<span class="blue">::<a href="/equipment_new.php">CLICK HERE</a>:: to view our New Equipment inventory. <br /><br /></span> 

de alguna manera me he activé algo que impedía "una" etiqueta de heredar el color de la etiqueta principal (en este caso "span") ahora.

+0

¿por casualidad acaba de agregar el atributo href? – kemiller2002

+7

Otros ya han respondido su pregunta, pero pensé que agregaría que las definiciones de clase css deberían basarse en cómo se usan (por ejemplo, sidelinks, pageheader, lista de productos) y no en lo que hacen (por ejemplo, azul, negrita, redborder) . –

Respuesta

29

Por defecto una etiqueta de ancla no hereda los atributos como el color, si un atributo href está presente.

Mira la diferencia entre estos dos en una página (yo no cómo conseguir que se muestre en el post):

<span style=color:green><a href="t">test</a></span> 


<span style=color:green><a>test</a></span> 

El siguiente enlace es a la w3 c:

http://www.w3.org/TR/html401/struct/links.html#h-12.2

los agentes de usuario por lo general hacen que los enlaces en tal manera para que sean obvias para usuarios (el subrayado, video inverso, etc.). La representación exacta depende de el agente de usuario. La representación puede variar según si el usuario tiene ya ha visitado el enlace o no.

.....

Por lo general, el contenido de A no son dictada en un modo especial cuando A define un ancla solamente.

+0

¿Tiene alguna referencia para el punto que "Por defecto, una etiqueta de anclaje no hereda atributos como el color si un atributo href está presente. "? – omg

+1

pruébalo; si una etiqueta de anclaje no tiene un atributo href, no actúa como una etiqueta de anclaje. – kemiller2002

+0

Sí, pero espero que algún enlace de referencia deje en claro si es estándar y por qué es así. – omg

3

Firebug le mostrará exactamente qué reglas de estilo se aplican a qué elementos. Es perfecto para esto

(Una posibilidad no CSS: ¿Tiene link/alink/vlink atributos en la etiqueta <body>?)

Editar: Duh, tonto de mí, los demás tienen derecho - <a href> no hereda el color. Pero Firebug sigue siendo una buena herramienta para este tipo de problema (incluso si no lo soy. 8-)

5

Creo que a no hereda el color por defecto. (ciertamente siempre ha funcionado de esa manera en mis sitios). ¿Por qué no cambiar

.blue { 
    color:#6E99E1; 
    font-size:9px; 
} 

a

.blue, .blue a{ 
    color:#6E99E1; 
    font-size:9px; 
} 
0

Debe establecer explícitamente el color de los enlaces para anular el color azul predeterminado.

41

Sólo una adiciones a las otras respuestas, si desea sus <a> etiquetas para heredar el color de su padre que puede usarse

a {color: inherit; } 
+0

Aunque todos tratamos de pasar viejos navegadores, vale la pena señalar: "Internet Explorer 7 y versiones anteriores no admiten el valor de heredar propiedades que no sean la dirección y la visibilidad". - [SitePoint] (http://reference.sitepoint.com/css/inheritvalue) –

+0

Excelente solución justo lo que estaba buscando – Paludis

6

que iba a publicar esto como un comentario, pero era poniéndose un poco largo ... Así que esta es una respuesta a la pregunta, así como una respuesta al Kevin's answer y sus comentarios.

Etiquetas de ancla do heredan el color, vinculado o no. La única razón por la que no lo hacen es porque ya tienen su color establecido en la hoja de estilo predeterminada del navegador. Lo mismo puede decirse del subrayado del enlace (que, supongo, no notó, porque en realidad quiere o ya lo ha cambiado).

En Firefox, puede ver esto en Firebug si selecciona "Mostrar agente de usuario CSS" (o puede ver el Firefox's internal stylesheets directamente. Puede ver los valores predeterminados del navegador en Webkit Web Inspector y Opera's Dragonfly también. no creo que se pueda en el IE.

no sé de ningún sitio que tiene una visión de conjunto de valores por defecto todos los de tu navegador. de CSS2 "informativo" HTML4 stylesheet así como la YUI reset stylesheet sería un buen punto de partida, pero ninguno de los dos mencionan cualquier color (enlace) (la hoja de estilo HTML4 menciona el subrayado).

Para saber qué propiedades se heredan en general, puede usar el CSS2 reference property index table (consulte la columna "¿Heredado?"). SitePoint también lo menciona en su CSS reference.

Así que si usted quiere asegurarse de que su enlace hereda el color de su matriz en lugar de a partir de estilo por defecto del navegador, lo ideal sería hacer algo como esto:

.blue a:link { 
    color: inherit; 
} 

Usted puede configurarlo para los diferentes seudo -clases por separado (así que :visited, :hover y :active también), o para la etiqueta a en total.

Sin embargo, si desea admitirlos también, tendrá que establecer el color explícitamente.

1

Es probable que vea el colorante a: visitado. Pruebe esto:

.blue, .blue:link, .blue:visited { 
    color:#6E99E1; 
    font-size:9px; 
} 
Cuestiones relacionadas