如何提高css规则优先级的一个html片段

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

来源

2011-05-13 tsds

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

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

来源

2011-05-13 18:58:01

您可以尝试将您的代码段放入带有唯一ID的DIV中。

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

来源

2011-05-13 18:55:25 kei

您的代码段应包含在iframe之内。

这是“第三方网站小部件”的常用方式。

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

来源

2011-05-13 18:57:52 thirtydot

它不能做，因为一些JavaScript问题 – tsds 2011-05-13 19:00:49

该网站的CSS使用'！重要'在愚蠢的方式吗？如果不是的话，那么建议预先加上“id”的答案肯定会起作用。例如，'#myWidget p {..}'/'#myWidget a'会覆盖文档其余部分的CSS（比如在'body'上设置的东西）。假如你做'#myWidget {/ *设置合理的默认值如字体，行高来避免级联* /}'，你应该没问题。 – thirtydot 2011-05-13 19:03:59

我能想到的唯一方法就是让选择器在某些方面更加具体。例如，

LI { color: red; } 

LI.class { color: blue; } 

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

但是你真的受到了'你无法控制的其余CSS'的摆布。

我认为你最好的选择是把ID和独特的课程放在所有yoru的东西上，并且指定它。这虽然不是很好，但是因为您可能想要申请一些“剩余的CSS”。

来源

2011-05-13 18:57:58 n8wrl

如果'重要'不会这样做，我不相信增加选择器的特异性。 – BoltClock 2011-05-13 19:00:19

重要可能不支持任何地方。看到这个：http://stackoverflow.com/questions/189621/when-does-csss-important-declaration-not-work – n8wrl 2011-05-13 19:14:00

！重要的是不会覆盖内联样式，但第三方网站不能修改我的html标签，所以情况并非如此。 – tsds 2011-05-13 19:20:55

如果你不能使用iframe方法，你需要找出父页面声明所具有的specificity的级别，并且用你的样式声明来打败它，记住它们仍然适用于你不要清除它们。否则，请带上“！重要”！你可能想要找一个clear.css或者其他的东西来为你做这件事，因为很多网站都提供这个功能。

来源

2011-05-13 19:12:44 Briguy37

如何提高css规则优先级的一个html片段

回答

相关问题