将css重置为google chrome中单个项目的浏览器默认值答案

【问题标题】：Resetting css to browser defaults for a single item in google chrome将css重置为google chrome中单个项目的浏览器默认值
【发布时间】：2010-10-22 12:00:56
【问题描述】：

我的浏览器扩展程序将一个 div 项目嵌入到浏览器动态打开的网页中。 div 包含几个子项，例如按钮、跨度、输入框等。

问题是当 div 插入页面时，页面的 css 会影响 div 及其内容。

例如，如果页面有一个css，例如：

span {
 text-shadow: 1px 1px 1px blue;
}

然后我动态添加的 div 中的跨度有蓝色文本阴影。我正在做的解决这个问题是使用 !important 设置任何可能影响我的 div 内容的可能指令，例如

mydiv span {
  text-shadow: none !important;
}

这是垃圾。

是否有任何明智的方法可以覆盖给定项目的 css，将其恢复为浏览器 (google-chrome) 默认值？

谢谢。

【问题讨论】：

标签： css google-chrome reset

【解决方案1】：

是否有任何理智的方法可以将 css 重置为仅针对单个项目的浏览器默认值？

很遗憾，没有。 auto 值在某些情况下将作为默认值，但并非总是如此，您仍然必须为每个可能的属性指定它。这是关于 CSS 的东西，真的很烂。

不过，我想到了一个想法。看到您专门询问 Chrome，如果您控制所有 CSS 类并且不介意一些混乱，您可以像这样使用 CSS3 的not：

span:not(.default) {
 text-shadow: 1px 1px 1px blue;
}

如果您在每条 CSS 规则中使用 not(.default)，如果您给元素指定 default 类，您就可以拥有具有默认行为的元素：

<div class="default">

我没有使用 CSS 3 的个人经验，但这应该可以。它不适用于旧版浏览器，因此它（还）不是真正的主流兼容。

【讨论】：

【解决方案2】：

您不能“重置”css 规则，您必须覆盖它们 (text-shadow:none;)

【讨论】：

是的，我想问的是如何覆盖单个项目的页面 css 以使其恢复到浏览器默认值:)
给item添加类或者id，覆盖css规则，使其成为浏览器规则。