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

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

css html javascript

Omar Abid · 技术社区 · 14 年前

<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 回复 | 直到 14 年前

rob 14 年前

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

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

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

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

谷歌“css重置”。

Jeremy 14 年前

.myplayer {
 iterate_over_all_properties: default !important;
}

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

marcio 14 年前

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

.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 14 年前

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

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

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

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

Dan Davies Brackett 14 年前

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

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

7 月前

Mass · 如何在Tailwind CSS v4中创建配置

7 月前

magenta placenta · 将css变量合并为一个变量

7 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

8 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

8 月前

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

8 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

8 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

8 月前

Luckkks · 过渡色工作不正常

8 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

8 月前