Come posso applicare una regola css a tutti i discendenti di un elemento

Question

Come puoi ridefinire una classe se è in un'altra classe specifica?

div.cls { 
color:blue; 
} 

div.tst > div.cls { 
color:red; 
} 

<div class="cls">test</div> // text color = blue 

<div class="tst"> 
    <div class="cls">test</div> // text color = red 
    <div> 
    <div class="cls">test</div> // text color = blue 
    </div> 
<div> 

Come rendere anche l'ultimo rosso?

jsfiddle

http://jsfiddle.net/gpD7H/

Answer 1

Utilizzare la descendant selector^[W3C]: div.tst div.cls

> è il child selector^[W3C] e selezionerà solo figli di un elemento.

Answer 2

Esattamente come quello. Tuttavia, la tua seconda divisione non sarà rossa in quanto è contenuta anche in un'altra divisione. Il selettore > si abbina solo ai bambini immediati sotto l'elemento abbinato prima, quindi sta cercando all'interno di div.tst a un solo livello. Provare a rimuovere la > dal selettore:

div.tst div.cls { 
color:red; 
} 

Your updated jsFiddle

Answer 3

ho usato questo, il lavoro per me:

.name-di-genitore * {color: red; }