代码之家 › 专栏 › 技术社区 › Omar Abid

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

css html javascript

Omar Abid · 技术社区 · 15 年前

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

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

.myplayer {
 a_property: #fdfdfd;
}

一切都很好。但是,等等,我的脚本应该运行在我无法控制的页面上,有人在设计他的页面时放了这段代码

.myplayer {
 another_property: crap;
}

或

* {
 that_property: crap;
}

那些废话现在出现在我的剧本上了,因为我正在改编。我可以在我的CSS课上做

.myplayer {
 iterate_over_all_properties: default;
}

5 回复 | 直到 15 年前

rob 15 年前

想必您只想删除“您的”元素上的css。可以通过使用通配符将应用于特定类名的元素及其所有子元素的样式来执行此操作。例如:

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

那你就必须创造性地利用它!对你自己的css样式很重要。

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

谷歌“css重置”。

Jeremy 15 年前

.myplayer {
 iterate_over_all_properties: default !important;
}

或许,作为另一种选择,您可以确保您的脚本和样式放在结束正文标记的正内部,以确保覆盖其他用户在页面的前一部分中可能执行的任何操作。

marcio 15 年前

另一个解决方案是选择一个使用机会较少的类名,或者重置所有可能以不希望的方式格式化元素的属性。这样地:

.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;
}

Tom 15 年前

<head> HTML文档的一部分(在外部样式表声明之后)。如果最后一个样式表声明中包含重置,那么调用自己的样式表也可以工作。您可以使用JavaScript来触发这些。

您可以在此处找到全局重置的示例,您可以根据需要进行调整:

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

另外一种选择可能是为HTML和样式创建一个容器,该容器完全重置了其他样式,然后只对其应用样式。容器可能是 <div>

Dan Davies Brackett 15 年前

如果你想让你的作品从风格的角度独立出来,把它放在iframe中或者使用Flash这样的插件。如果不接受,则应接受页面决定应用的样式。毕竟,这不是你的网页!

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

11 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

11 月前

Alex · 在轻量级中同时解构和不解构变量

11 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

11 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

11 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

11 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

11 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

11 月前

user3472810 · Angular@Output/EventEmitter返回undefined

11 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

11 月前