css - 防止将全局 CSS 应用于 Angular 5 中的组件

Question

在 .angular-cli.json 中，我得到了一些全局样式:

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/font-awesome/css/font-awesome.css",
        "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
        "styles.scss"
    ],

但我不希望将它们中的任何应用到特定组件 - 它可以实现吗？

编辑 1:
不幸的是，覆盖组件样式中的 CSS 样式是行不通的，因为组件模板中的 HTML 是从 Web API 后端获取的——我想我不能现实地覆盖所有可能的类/选择器？

Answer 1

CSS 级联(因此称为级联样式表)。要获得完整的浏览器支持，您唯一的选择是覆盖选择器。

另一种选择，由于缺乏对 IE 和 Edge 的支持，因此不常见，是 all 属性。

html

<div class="component-container">
  <!-- your components html template ... -->
</div>

CSS

.component-container {
  all: initial;
  all: unset;
}