Html 为什么在设置容器样式时，某些样式（例如背景色）应用于所有元素？

我正在使用Stencil JS为我正在构建的微型前端编写组件。我有一个

，顾名思义，它包含了我所有的其他组件

我试图改变

index.html

主体的背景色，然后让其他元素、组件保持自己的风格

问题是，如果我尝试将

背景色：红色

应用于我的

，其余的子项也会继承背景色

我希望如果我对父元素应用背景色，子元素会保留自己的样式，但不是这样

如何在没有子级继承的情况下设置组件的样式

我是这样设置的：

import { Component, h } from '@stencil/core';

@Component({
  tag: 'lh-dashboards-container',
  styleUrl: 'lh-dashboards-container.scss',
  scoped:true

})
export class LhDashboardsContainer {
  render() {
    return (
      <div class="lh-dashboards-container">
        <lh-dashboards-navigation></lh-dashboards-navigation>
        <lh-dashboards-cohort-finder></lh-dashboards-cohort-finder>
      </div>
    );
  }
}

---

每个子组件及其元素的背景都将更改为红色。

您可以添加

all:initial
如果需要的话，最好设置子项的样式，覆盖从父项继承的子项

您可以阅读更多关于
all
的信息，我最终按照建议设置了子元素的样式。非常感谢。
//lh-dashboards-container.scss
.lh-dashboards-container {
    background-color:red;
}