Как предотвратить использование CSS-свойства цвета из родительского класса в дочерние классы

Question

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

.root .child1 {color: red;}

<div class="root">
  <div class="child1">Hi I am child1 of root
    <div class="child12">child2</div>
  </div>
</div>

Answer 1

Чтобы предотвратить получение дочерними классами цвета родительского класса, используйте следующий код CSS

.child1 * {
  color: black;
}

*, чтобы выбрать все элементы, являющиеся дочерними для .child1

Если вы толькоЧтобы предотвратить прямой дочерний класс родительского класса, вы можете использовать следующие css

.child1 > * {
  color: black;
}

    .root .child1 {
 background-color: red;
}

.root .child1 div{
  background-color: white;
}

<div class="root">
  <div class="child1">Hi I am child1 of root
    <div class="child12">child2</div>
    <div class="child13">child3</div>
    <div class="child14">child4</div>
  </div>
</div>