Question

我正在构建一个脚本，它会向页面添加一些HTML代码。那个HTML代码有风格，比方说我添加了

<div class="myplayer">
</div>

代码是使用JavaScript添加的，但我也通过CSS添加样式

.myplayer {
 a_property: #fdfdfd;
}

一切都很好。但是等等，我的脚本预计会在我无法控制的页面上运行，有人在设计他的页面时会把这段代码

.myplayer {
 another_property: crap;
}

或

* {
 that_property: crap;
}

这个废话现在出现在我的剧本上，因为我正在指教它。我可以用我的CSS类

.myplayer {
 iterate_over_all_properties: default;
}

但是属性的数量有点压倒性，我需要研究每一个属性。我该如何避免这种干扰？

Answer 1

据推测，你想要只消除“你的”元素的css。您可以通过使用通配符应用适用于特定类名称的元素及其所有子元素的样式来完成此操作。例如：

.reset * {
border: 0 !important;
background: transparent !important;
/* etc */
}

然后，您通常必须在自己的CSS样式中创造性地使用！important。

它从来都不漂亮，但通常可以完成。

Google“css reset”。

Answer 2

我能想到的最好和最可靠的方法是使用JS设置CSS属性，或者在样式的末尾抛出“！important”以确保它们适用。当然，如果他们之后应用了一种风格并使用“！important”，那么他们就会坚持下去。

.myplayer {
 iterate_over_all_properties: default !important;
}

也许，作为另一种选择，您可以确保将您的脚本和样式放在关闭正文标记内部，以确保覆盖其他用户在页面前面部分可能完成的任何操作。

Answer 3

您应该通过Javascript或内联CSS设置CSS属性。请记住，内联CSS将始终应用于外部CSS。

另一种解决方案是选择一个使用机会较少的类名，或重置所有可能以不合需要的方式格式化元素的属性。像这样：

.myplayer {
 color:#000;
 text-decoration:none;
 line-height:1em;
 font-weight:normal;
 border:none;
 padding:0;
 margin:0;
 other-properties: default;
}

.myplayer{
 your-property:your-value;
}

Answer 4

最简单的可能是进行“全局重置”，或者将其包含在HTML文档的<head>部分中（在外部样式表声明之后）。如果它是最后一个样式表声明，那么调用自己执行重置的样式表也可能有效。您可以使用JavaScript来触发这些。

您可以在此处找到全局重置的示例，您可以根据自己的需要进行调整：

http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/

还有一种替代方法可能是为您的HTML和样式创建一个完全重置其他样式的容器，然后仅将样式应用于它。例如，容器可能是<div>。

Answer 5

如果您希望将您的作品与样式视角隔离，请将其放在iframe中或使用Flash之类的插件。如果不这样做，则应接受页面决定应用的样式。毕竟，这不是你的页面！

对于对窗口小部件功能非常重要的属性，您可能需要使用重置（如已经建议的那样），但是当它出现时，您必须依赖于它的良好意愿。托管您的小部件的页面不会让您失望。

如何避免HTML页面中的CSS干扰

5 个答案: