如何确保您的 CSS 规则不被覆盖答案

【问题标题】：How to make sure your CSS rules are not overridden如何确保您的 CSS 规则不被覆盖
【发布时间】：2013-11-14 08:48:56
【问题描述】：

我开发了一个简单的 jQuery 插件，其中包含一些样式化的 div，

但是，当用户在他们的网站中实现我的代码时，由于原始网站上的一些 CSS 规则覆盖了我的，因此 div 看起来通常很糟糕。

我的班级名称是唯一的，但如果用户为 div 设置了 css 规则，这将无济于事

【问题讨论】：

你试过了！重要吗？
如果你真的想确保插件看起来不错，你可以使用内联样式，例如$('.yourplugin').css({}) 覆盖所有可能的覆盖。
@dude 是的，但是例如原始站点有 div { border:3px; } 而我根本不使用边框，所以无处使用 !important 标签，我可能会列出所有主要的 css 属性这可能会影响显示并使用!important 禁用它们，但我认为这不是一个好的解决方案
样式表中的特殊性和顺序。它们应该放在样式表的底部，因为它是从上到下读取的。除此之外，如果它们的样式仅基于通用元素标签，这将不起作用。我想知道你是否可以通过 iframe 添加它。虽然我不积极，但这可能会阻止样式...最后一个选项是内联样式，也请检查一下。stackoverflow.com/questions/15901030/…
如果有人使用 div {border: 3px;} 你可能无法帮助他.. 或者你将不得不坚持覆盖这样的规则。

【解决方案1】：

您可以在 css 中使用 !important 标志来确保规则不会被覆盖，但如果其他人当然都使用它们，它们仍然容易出错：

p {
    color: red !important;
}

【讨论】：

【解决方案2】：

除非你键入你能想到要强制执行的每一条 CSS 规则，在必要时使用 !important 来确保优先级，否则你真的不能覆盖你不能明确引用的样式。也许您可以选择 10 个最有问题的规则 - 颜色、边框、填充、边距等 - 并简单地包括这些。

【讨论】：

【解决方案3】：

据我所知，div.className 的优先级高于 div。你可以试试用这个。您还需要定义所有主要属性（例如边距、边框等）。使用“！important” - 在插件开发的情况下不是很好的风格，因为有些人需要根据他们的页面设计重新定义你的 css 类。

【讨论】：