具有类冲突的Angular2 css文件答案

【问题标题】：Angular2 css file with class conflict具有类冲突的Angular2 css文件
【发布时间】：2023-08-15 05:18:01
【问题描述】：

我使用 2 个 css 文件，但在这两个文件中，我有一个同名的类...我在一个组件中使用一个，第二个在另一个组件中使用。

如何使用这些 CSS 文件不再有冲突？

提前谢谢！

【问题讨论】：

两个组件都应用不同的 CSS 文件？你能提供更多细节吗？
嘿！谢谢你对我的问题感兴趣！所以，我有两个组件。和里面有同名类的2个css文件。每个组件只使用一个 css 文件。如果我在组件 1 上启动我的应用程序，则样式很好。但是当我进入组件 2 时，这个采用了组件 1 的样式。如果我从组件 2 开始，反之亦然。
你不能用styleUrl给它CSS吗？
是的，但是，我已经这样做了！另一个细节是组件 1 和组件 2 使用许多组件来工作。所以我用 styleUrl 给 css 并将封装设置为 ViewEncapsulation.None 以将 css“分发”到这些组件
请创建一个 plunkr 并提供一些代码。以及您在问题的更新中提到的任何内容。

【解决方案1】：

我会说：

CSS 文件 1：

div.comp1Class > table > tr.myClass {...}

CSS 文件 2：

div.comp2Class > table > tr.myClass {...}

而不是两者兼而有之：

.myClass {...}

【讨论】：

【解决方案2】：

你能应用更具体的选择器吗？具体选择器优先于不太具体的选择器。

例如。对于组件 XYZ，CSS 中的选择器将是 .xyz .common-class-name{ 代码在这里 } 对于组件 ABC，CSS 中的选择器将是 .abc .common-class-name{ 代码在这里 } 这样你就可以解决这个问题了。

【讨论】：