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

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。

它从来都不是很漂亮，但通常可以做到。

谷歌“CSS 重置”。