Làm cách nào để áp dụng một kiểu cho tất cả các phần tử con

Tôi có một phần tử với class='myTestClass'. Làm cách nào để áp dụng kiểu css cho tất cả các phần tử con của phần tử này? Tôi chỉ muốn áp dụng phong cách cho các phần tử trẻ em. Không phải con cái của nó.

tôi có thể dùng

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

giải pháp nào phù hợp với tất cả divtrẻ em, nhưng tôi muốn một giải pháp phù hợp với tất cả trẻ em. Tôi nghĩ rằng tôi có thể sử dụng *, nhưng

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

không hoạt động.

Biên tập

Bộ .myTestClass > *chọn không áp dụng quy tắc trong firefox 26 và không có quy tắc nào khác cho ký quỹ theo firebug. Và nó hoạt động nếu tôi thay thế *bằng div.

Như nhận xét của David Thomas , hậu duệ của các phần tử con đó (có khả năng) sẽ kế thừa hầu hết các kiểu được gán cho các phần tử con đó.

Bạn cần bao bọc .myTestClassbên trong một phần tử và áp dụng các kiểu cho con cháu bằng cách thêm .wrapper * bộ chọn con cháu . Sau đó, thêm .myTestClass > * bộ chọn con để áp dụng kiểu cho các phần tử con, không phải phần tử con của nó. Ví dụ như thế này:

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>

Thay vì *bộ chọn, bạn có thể sử dụng :not(selector)với >bộ chọn và đặt thứ gì đó chắc chắn sẽ không phải là trẻ em.

Chỉnh sửa: Tôi nghĩ rằng nó sẽ nhanh hơn nhưng hóa ra tôi đã nhầm. Xem thường.

Thí dụ:

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


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