Bir öğenin tüm alt öğelerine nasıl stil uygularım

İle bir unsurum var class='myTestClass'. Bu öğelerin tüm alt öğelerine nasıl css stili uygularım? Ben sadece stili çocuk elemanlarına uygulamak istiyorum. Torunları değil.

kullanabilirim

.myTestClass > div {
  margin: 0 20px;
}

tüm divçocuklar için çalışıyor , ancak tüm çocuklar için işe yarayan bir çözüm istiyorum. Kullanabileceğimi düşündüm *ama

.myTestClass > * {
  margin: 0 20px;
} 

çalışmıyor.

Düzenle

.myTestClass > *Seçici firefox 26 kuralı geçerli değildir ve kundakçı göre marjı için başka bir kural yoktur. Ve *ile değiştirirsem işe yarar div.

David Thomas'ın yorumladığı gibi , bu alt öğelerin torunları (büyük olasılıkla) bu alt öğelere atanan stillerin çoğunu miras alacaklardır.

.myTestClassBir öğenin içini sarmalamanız ve .wrapper * alt seçiciyi ekleyerek stilleri alt öğelere uygulamanız gerekir . Ardından, stili çocuklara değil çocuklara uygulamak için .myTestClass > * çocuk seçici ekleyin . Örneğin bunun gibi:

JSFiddle - DEMO

.wrapper * {
    color: blue;
    margin: 0 100px; /* Only for demo */
}
.myTestClass > * {
    color:red;
    margin: 0 20px;
}

<div class="wrapper">
    <div class="myTestClass">Text 0
        <div>Text 1</div>
        <span>Text 1</span>
        <div>Text 1
            <p>Text 2</p>
            <div>Text 2</div>
        </div>
        <p>Text 1</p>
    </div>
    <div>Text 0</div>
</div>

Yerine *selektör kullanabilirsiniz :not(selector)ile >kesinlikle bir çocuk olmayacağım selektör ve set şey.

Düzenleme: Daha hızlı olacağını düşündüm ama yanıldığım ortaya çıktı. Saygısızlık.

Misal:

.container > :not(marquee){
        color:red;
    }


<div class="container">
    <p></p>
    <span></span>
<div>