如何为html片段提高css规则优先级

Question

我写了一个HTML / CSS片段，包含在一些第三方网站中。
但该网站的CSS规则使我的片段看起来很糟糕。为了保持代码片段的外观，我必须使用！important 关键字，但这很糟糕，我必须写这个关键字大约1000次（除了这样的代码看起来不太好）。
我可以也使用内联CSS而不是外部.css文件，但它也不是解决方案。
那么，我怎样才能以优雅的方式保护我的CSS样式？

Answer 1

使用具有唯一ID的div的建议很好。但是，主机页面样式表中的其他规则可能会使用!important。即使您使用唯一ID，这些规则也会覆盖您的规则。

首先在iframe中使用外部文档（这并非总是可行），使用!important是我能看到的唯一100％安全的方法。

Answer 2

您的代码段应包含在iframe。

中

这些“第三方网站的小工具”通常会起作用。

如果您使用iframe，则来自父文档的CSS不会影响您的“HTML / CSS代码段”。

Answer 3

您可以尝试将代码段封装在具有唯一ID的DIV中。

然后在您的CSS上获取该代码段的样式，为样式表中的项目添加DIV的ID选择器。

Answer 4

我能想到的唯一方法是以某种方式使选择器更具体。例如，

LI { color: red; }

LI.class { color: blue; }

<li class="class">I will be blue</li>

但你真的受到你无法控制的'其他CSS'的支配。

我认为你最好的选择是将ID和唯一的类放在所有yoru的东西上，然后指出它。这也不是很好，因为你可能想要一些'其余的CSS'来应用。

Answer 5

如果你不能使用iframe方法，你需要弄清楚父页面声明的specificity级别，并用你的样式声明来打败它，记住它们仍然会如果您不清除它们，请申请。否则，带上“！important”的!!!您可能希望找到一个clear.css或类似的东西来为您执行此操作，因为许多站点都提供此功能。