ฉันจะใช้สไตล์กับลูก ๆ ขององค์ประกอบทั้งหมดได้อย่างไร

class='myTestClass'ฉันมีองค์ประกอบที่มี ฉันจะใช้สไตล์ css กับลูก ๆ ทั้งหมดขององค์ประกอบนี้ได้อย่างไร ฉันต้องการใช้สไตล์นี้กับองค์ประกอบที่เด็ก ๆ เท่านั้น ไม่ใช่ลูกหลานของมัน

ฉันสามารถใช้

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

ซึ่งเหมาะกับdivเด็ก ๆทุกคน แต่ฉันต้องการวิธีแก้ปัญหาที่เหมาะกับเด็กทุกคน ฉันคิดว่าฉันสามารถใช้ได้*แต่

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

ไม่ทำงาน, ไม่เป็นผล.

แก้ไข

.myTestClass > *เลือกไม่ใช้กฎใน Firefox 26 และไม่มีกฎอื่น ๆ สำหรับอัตรากำไรตามวางเพลิง และจะได้ผลถ้าฉันแทนที่*ด้วยdiv.

ตามความเห็นของDavid Thomasลูกหลานขององค์ประกอบลูกเหล่านั้น (น่าจะ) สืบทอดรูปแบบส่วนใหญ่ที่กำหนดให้กับองค์ประกอบย่อยเหล่านั้น

คุณจำเป็นต้องห่อของคุณ.myTestClassภายในองค์ประกอบและใช้รูปแบบเพื่อลูกหลานโดยการเพิ่มตัวเลือกลูกหลาน.wrapper * จากนั้นเพิ่ม.myTestClass > * ตัวเลือกเด็กเพื่อใช้สไตล์กับองค์ประกอบย่อยไม่ใช่ลูกใหญ่ ตัวอย่างเช่นนี้:

JSFiddle - สาธิต

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

แทนที่จะใช้*ตัวเลือกคุณสามารถใช้:not(selector)กับ>ตัวเลือกและตั้งค่าสิ่งที่จะไม่เป็นเด็กอย่างแน่นอน

แก้ไข: ฉันคิดว่ามันจะเร็วขึ้น แต่ปรากฎว่าฉันคิดผิด ไม่สนใจ.

ตัวอย่าง:

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


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