如何防止CSS颜色属性从父类应用于子类

Question

我只想使用父类名称在child1类中添加CSS。我尝试了这段代码，但是CSS被添加到child1的所有子类中。我不想在child1

的子类中添加CSS

.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

import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';
.
.
@NgModule({
  imports: [
    FormsModule,
    NgSelectModule,
. 
.
.

.child1 * { color: black; } 选择所有.child1子元素。

如果只想阻止父类的直接子代，则可以使用以下CSS

*

.child1 > * {
  color: black;
}

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

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