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

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

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

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

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

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

не работает.

редактировать

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

42
css css-selectors

1 ответов

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

вам нужно обернуть ваш .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>
73