角度全局css文件css不适用于其他组件



我使用的是Angular v10,我有一些CSS在整个应用程序中使用,所以我已经在我们的全局styles.CSS文件中编写了这些CSS,但CSS不适用于其他组件,如果我在组件相关的CSS中编写相同的CSS,它可以正常工作。在搜索时,我在组件中声明了ViewEncapsulation.None,它在一个组件中运行良好,但在其他组件中仍然无法应用。以下是我的angular.json文件

angular.json

我从来没有在任何angular项目中遇到过这个问题,是新版本的angular有问题,还是我做错了什么?

非常感谢您的帮助!

由于CSS的特殊性,可能会出现这种情况。

简单地说:不同的选择者有不同的特异性。例如:

如果您在全局样式表中声明了以下类:

.some-class {
color: red;
}

在一个组件中,您有以下内容:

button.some-class {
color: blue;
}

则属性颜色被覆盖为";蓝色";因为组件中CSS选择器的特定性高于全局样式表中的特定性。

解释

要计算CSS选择器的特异性,您可以从0开始并添加:

  • 1000(用于内联样式属性(
  • 100(每个ID(
  • 10(针对每个类、属性、伪类(
  • 1(对于每个HTML元素(

一些例子:

button.class-1.class-2的特异性为1(1个html元素(+20(2类(=21

#myId.class-1的特异性为100(1 ID(+10(1类(=110

因此,后一个选择器覆盖第一个选择器中声明的所有CSS属性。

要获得完整的解释,请查看w3schools上的相应网站。

相关内容

  • 没有找到相关文章

最新更新