html - CSS 冲突样式表

Question

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

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

Answer 1

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

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

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

第三，css的“级联”部分的层次结构是down -> out：

所以

#header a{
    color:#fff;
}

#header div a{
    color:#000;
}

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

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

Answer 2

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

Answer 3

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

Answer 4

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

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