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

Question

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

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

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

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

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

не работает.

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

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

Answer 1

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

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

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>