2012-04-17 8 views
7

Me preguntaba si no cambia los valores, ¿hover, active y focus heredan automáticamente la configuración de la etiqueta estándar a?¿Los valores de estado estacionario, activo y de enfoque heredan valores?

Por ejemplo:

.wrapper .left .main .row .holder .more a, 
#content .wrapper .left .main .row .holder .more a:visited 
{ 
    width: 92px; 
    min-width: 92px; 
    max-width: 92px; 
    height: 23px; 
    min-height: 23px; 
    max-height: 23px; 
    display: block; 
    margin: 0px auto; 
    background: #fff url(../images/more-info-btn.png) top left no-repeat; 
} 

#content .wrapper .left .main .row .holder .more a:hover { 
    width: 92px; 
    min-width: 92px; 
    max-width: 92px; 
    height: 23px; 
    min-height: 23px; 
    max-height: 23px; 
    display: block; 
    margin: 0px auto; 
    background: #fff url(../images/more-info-btn.png) bottom left no-repeat; 
} 

¿Sería la continuación hacer lo mismo?

#content .wrapper .left .main .row .holder .more a, 
#content .wrapper .left .main .row .holder .more a:visited 
{ 
    width: 92px; 
    min-width: 92px; 
    max-width: 92px; 
    height: 23px; 
    min-height: 23px; 
    max-height: 23px; 
    display: block; 
    margin: 0px auto; 
    background: #fff url(../images/more-info-btn.png) top left no-repeat; 
} 

#content .wrapper .left .main .row .holder .more a:hover { 
    background: #fff url(../images/more-info-btn.png) bottom left no-repeat; 
} 
+3

No exactamente "heredan" los valores, ya que la herencia en CSS se refiere a tomar estilos de un elemento principal. Por el contrario, los valores son * en cascada *, o tomados de la regla general 'a' (confuso, lo sé). Aún así, tienes la idea correcta aquí. – BoltClock

Respuesta

5

Sí, eso es correcto, los pseudo estados heredan los valores.

Para mayor coherencia, es mejor declarar únicamente los estilos que está cambiando en las reglas de estado de su pseudo.

Con el siguiente código, el texto siempre será font-size:1.9em, con padding-top:10px independientemente de :hover Estado:

a 
{ 
    color:red; 
    font-size:1.9em; 
    padding-top:10px; 
} 

a:hover 
{ 
    color:green; 
}​ 

-- SEE EXAMPLE --

1

No, porque un elemento a en uno de los estados sigue siendo una a elemento, y un elemento no puede heredar de sí mismo. Pero cualquier ajuste que tenga a como el selector se aplica cuando el elemento está en uno de los estados, también.

Por lo tanto, cuando desee que algunas propiedades se apliquen a los elementos a en todos los estados, basta con configurarlos con el selector a.

Técnicamente, los dos conjuntos de reglas en su pregunta no son equivalentes, debido a las diferencias en los selectores, que afectan la especificidad. Las situaciones en las que esto importaría son raras e implicarían reglas bastante especiales en otras hojas de estilo que se aplican.

Cuestiones relacionadas