css - 将 CSS 重置为谷歌浏览器中单个元素的浏览器默认值

Question

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

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

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

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

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

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

这是垃圾。

是否有任何明智的方法来覆盖给定元素的 css，将其恢复为浏览器 (google-chrome) 默认设置？

谢谢。

Answer 1

Is there any sane way to reset the css to browser defaults for only a single item?

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

不过，我想到了一个想法。鉴于您具体询问的是 Chrome，如果您控制所有 CSS 类并且不介意一些困惑，您可以像这样使用 CSS3 的 not:

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

如果您在每个 CSS 规则中使用 not(.default)，如果您为元素提供 default 类，则可以拥有具有默认行为的元素:

<div class="default">

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