Ereditarietà CSS: sovrascrittura di un selettore genitore che è un selettore discendente

Come posso fare in modo che questo collegamento utilizzi il selettore figlio senza modificare o rimuovere il selettore genitore? (Voglio il link per essere blu.)Ereditarietà CSS: sovrascrittura di un selettore genitore che è un selettore discendente

<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>

E 'sorprendente per me che il genitore ha la precedenza il bambino in questo caso!

fonte

2010-02-26 Robert Claypool

Il genitore sovrascrive il figlio perché ".parent a" è più specifico di ".child". Come indicato da Obalix, devi rendere il tuo selettore figlio più specifico e a.child lo farà. –

Utilizzare a.child come selettore.

<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>

fonte

2010-02-26 21:41:10 AxelEckenberger

Ciò è dovuto alla specificità CSS. Loin più dopo il .parent lo rende più specifico di solo .parent e, in modo corrispondente, più specifico di solo .child. Il suggerimento di Obalix conferisce ai selettori la stessa specificità, con entrambi un elemento HTML di base e una designazione di classe. Quando la specificità è uguale, applicherà il valore più profondo specificato nella gerarchia, come previsto.

questo articolo (e le risorse a cui collegamenti) fanno un ottimo lavoro che spiega la specificità CSS: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

fonte

2010-02-26 21:49:12

Per il futuro esplorando http://css-tricks.com/specifics-on-css-specificity/

fondamentalmente si può contare il valore selettori in questo ordine

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

dove Inline = 1000, ID = 100, Classe = 10, Elemento = 1

Nel tuo caso .parent a == 11 e .child == 10 ecco perché il genitore sovrascrive lo stile di elemento figlio.

fonte

2012-04-16 23:13:59 Giedrius

Ereditarietà CSS: sovrascrittura di un selettore genitore che è un selettore discendente

risposta

Problemi correlati