css-css样式与另一个css文件冲突

Question

我正在做一个网站，问题是这样的。 我的页面中有一些 div 和表格。

我已经为它们编写了一些类和样式，并使它们看起来像我想要的那样。

然后我添加了一个 jquery 插件，它有一个 css 文件。我把它包括在内，我的很多风格都被破坏和改变了。

我在类名中使用了 !important ，尝试编辑它们，它解决了其中一些问题，但大多数仍然很糟糕。

有什么方法可以让样式分开吗？一种使 jquery css 文件只对其自身起作用并且不影响整个页面的方法？

Answer 1

没有啤酒也没有代码让荷马发疯！ 有两种选择，为什么外国 css 搞砸了你的设计。

1st - 您使用相同的类和 id 名称。

• 这可以通过将您的类名更改为独特的名称来轻松解决。我通常会在我的类和 id 中添加一个前缀来实现这一点...

第二个 - 包含的插件对元素本身进行样式设置，并且不使用类名或 ids

• 这可以在更改 css 加载顺序时得到解决。首先是插件，其次是您自己的样式表。

根据http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ ： 最后定义的规则会覆盖任何以前的冲突规则。

• 如果它仍然与您的某些元素混淆，那么您可能还没有在您的 css 中设计这些元素，因此采用了其他样式。

尽管如此，最好的方法是采用插件样式表并将其删除与您的样式表冲突的所有内容，这样您就不会再有冲突的规则了！

Answer 2

你可以：

1. 更改班级名称
2. 确保在插件 css 之后包含 css（以便覆盖插件）
3. 为您的页面创建一个类名并使用嵌套类名 (.page-name div.className)
4. 使用诸如 firebug 或任何其他开发人员工具之类的工具检查元素，并查看插件 css 是如何覆盖您的 css 的（使用 !important、更长的嵌套或只是因为它稍后声明）。