Как применить стиль ко всем дочерним элементам элемента

У меня есть элемент с class='myTestClass'. Как применить стиль css ко всем дочерним элементам этих элементов? Я только хочу применить стиль к элементам children. Не его внуки.

Я мог бы использовать

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

которые работают для всех детей div, но я хотел бы получить решение, которое работает для всех детей. Я думал, что могу использовать *, но

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

не работает.

Изменить

Селектор .myTestClass > * не применяет правило в firefox 26, и нет другого правила для поля в соответствии с firebug. И он работает, если заменить * на div.

Ответы

Ответ 1

Как прокомментировал David Thomas, потомки этих дочерних элементов (скорее всего) наследуют большинство стилей, назначенных этим дочерним элементам.

Вам нужно обернуть .myTestClass внутри элемента и применить стили к потомкам, добавив .wrapper * селектор потомков. Затем добавьте .myTestClass > * дочерний селектор, чтобы применить стиль к элементам children, а не к его внукам. Например, например:

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>

Ответ 2

Вместо селектора * вы можете использовать :not(selector) с селектором > и установить то, что определенно не будет дочерним.

Редактировать: Я думал, что это будет быстрее, но оказывается, я был не прав. Игнорирование.

Пример:

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


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