Herencia de CSS: anulando un selector principal que es un selector descendente

¿Cómo puedo hacer que este enlace use el selector secundario sin cambiar o eliminar el selector principal? (Quiero que el enlace a ser de color azul.)Herencia de CSS: anulando un selector principal que es un selector descendente

<html> 
    <head> 
     <style> 
      .parent a { color:Red; } 
      .child { color:Blue; } 
     </style> 
    </head> 
    <body> 
     <div class="parent"> 
      <a class="child" href="http://www.stackoverflow.com"> 
       stackoverflow 
      </a> 
     </div> 
    </body> 
</html>

Es sorprendente para mí que el padre del niño prevalece en este caso!

Fuente

2010-02-26 Robert Claypool

El padre reemplaza al hijo porque ".parent a" es más específico que ".child". Como indicó Obalix, debe hacer que el selector de su hijo sea más específico, y a.child lo hará. –

Use a.child como selector.

<html> 
    <head> 
     <style> 
      .parent a { color:Red; } 
      a.child { color:Blue; } 
     </style> 
    </head> 
    <body> 
     <div class="parent"> 
      <a class="child" href="http://www.stackoverflow.com"> 
       stackoverflow 
      </a> 
     </div> 
    </body> 
</html>

Fuente

2010-02-26 21:41:10 AxelEckenberger

Esto se debe a la especificidad de CSS. El extra a después de .parent lo hace más específico que solo .parent, y en consecuencia, más específico que solo .child. La sugerencia de Obalix da a los selectores la misma especificidad, ya que ambos tienen un elemento HTML base y una designación de clase. Cuando la especificidad es igual, aplicará el valor más profundo especificado en la jerarquía, como estaba esperando.

este artículo (y los recursos a los que se vincula) hacen un gran trabajo explicando CSS especificidad: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Fuente

2010-02-26 21:49:12

Para futura exploración http://css-tricks.com/specifics-on-css-specificity/

básicamente se puede contar el valor selectores en este orden

Inline | ID | Class/pseudoclass | Element 
1  | 1 | 1     | 1

donde En línea = 1000, ID = 100, Clase = 10, Elemento = 1

En su caso .parent a == 11 y .child == 10 es por eso que los padres anulan el estilo del elemento hijo.

Fuente

2012-04-16 23:13:59 Giedrius

Herencia de CSS: anulando un selector principal que es un selector descendente

Respuesta

Cuestiones relacionadas