2012-01-13 21 views
21

Tengo una clase extendida llamada "tomate".Cambiar todos los estados del enlace mismo color css

Mi css es:

.tomato a:link {color:#FF0000;}  /* unvisited link */ 
.tomato a:visited {color:#FF0000;} /* visited link */ 
.tomato a:hover {color:#FF0000;} /* mouse over link */ 
.tomato a:active {color:#FF0000;} /* selected link */ 

¿Hay alguna manera de combinar todo esto en un pedazo más pequeño de código? (Quiero que el enlace sea de color rojo en todos los estados)

+0

[Pregunta similar, con (OMI) mejores respuestas] (http://stackoverflow.com/questions/303440/setting-visitited-link-to-same-state-as-alink-and-ahover) – neoascetic

+3

Olvidó un: estado de foco –

+0

Use SASS http://sass-lang.com/ –

Respuesta

19

Este es el shortest, yo no te creo puede hacer que cualquier corto que:

.tomato a:link, .tomato a:visited, .tomato a:hover, .tomato a:active { color:#FF0000; } 

O

.tomato { a:link, a:visited, a:hover, a:active { color:#FF00000; } } 

esperanza esta ayuda s.

+6

¿El segundo es una sintaxis CSS válida? –

+4

@ GraciaShao, No. Algunos preprocesadores de CSS admiten esa sintaxis (LESS, SCSS), pero el resultado compilado es el mismo que el del primer ejemplo. – Jack

+0

No para el estado FOCUS conseguido. –

10
.tomato a:link, 
.tomato a:visited, 
.tomato a:hover, 
.tomato a:active { 
    color:#F00; 
} 

Nota, el HEX color podría ser abreviado, también. :)

Si usted elige utilizar un marco CSS para organizar su CSS, tal como menor, podría ser mucho más simple que el anterior:

.tomato { 
    a:link, 
    a:visited, 
    a:hover, 
    a:active { 
     color:#F00; 
    } 
} 
+0

Bueno, pero aún repite el tomate. ¿hay alguna forma de eliminar los tomates repetidos? – David19801

+0

@ David19801 Vea mi respuesta actualizada sobre LESS. Esa podría ser una opción. –

+1

¿Por qué falta el estado FOCUS? –

4

En realidad, es mejor usar the attribute selector. En este caso sería:

.tomato a[href]{color:#F00;} 

o si es necesario:

.tomato [href]{color:#F00;} 
+0

¿Cumple esta norma, por lo que puedo confiar en que esto no cambie? Es conveniente para diseñar enlaces que nunca deberían cambiar. – trlkly

+1

A partir de [Estándares MozDev] (https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) Soporte básico de escritorio: Chrome (Sí) || Edge (Sí) || Firefox (Gecko) 1.0 (1.7 o anterior) || IE 7+ || Opera 9+ || Safari 3 – systemaddict

Cuestiones relacionadas