CSS 冲突样式表答案

【问题标题】：CSS Conflicting Style SheetsCSS 冲突样式表
【发布时间】：2023-03-09 20:00:01
【问题描述】：

我有两个样式表，它们在几个方面相互冲突。因为我使用了 5 个、6 个，有时甚至是 9 个或 10 个完整的插件，每个插件都有三到四个样式表，以及我自己的，所以到处都会出现冲突。解决此问题的最佳方法是什么？是不是只能进去修改所有插件的选择器？

编辑：问题是所有插件都使用自己的样式表，这些样式表相互冲突。如果不修改所有选择器，最佳但可能是不可能的解决方案是将样式表轻松本地化到页面的某些部分。

【问题讨论】：

【解决方案1】：

记住一些关于样式覆盖的非常基本的技巧：

首先，尽量避免使用肯定会被其他来源使用的通用类名和 id。

其次，!important 可以覆盖样式，但只能以有意义的方式使用...

三、css的“级联”部分的层次结构向下-> out：

所以

#header a{
    color:#fff;
}

#header div a{
    color:#000;
}

#header div.some-class a.active{
    color:#ff0000;
}

无论放在哪里，底部选择器都会优先考虑，因为它专门针对可怕的选择器链。因此，也许您需要以一种减少被其他来源覆盖的机会的方式编写您的 css。

【讨论】：

【解决方案2】：

最好的方法绝对是不去修改插件的选择器，除非你自己写插件。您应该修改自己的 classes/ids/css 文件以...没有冲突。

【讨论】：

【解决方案3】：

让你的 CSS 尽可能具体，除非你确信你知道自己的方式，否则我不会修改插件。

【讨论】：

【解决方案4】：

使用特定且适当的 ID 将您要本地化的每个部分包装在其自己的 div 中。然后将样式表中的每个选择器修改为以 #specificSectionID 开头。在一个不错的代码编辑器中查找/更改，您将在五分钟内完成。示例：

.headersection a {color: #DDD; background: transparent}
//becomes
#topSection .headersection a {color: #DDD; background: transparent}

【讨论】：