将 google chrome 中单个项目的 css 重置为浏览器默认值
我的浏览器扩展将 div 项目嵌入到浏览器即时打开的网页中。 div 包含多个子项,例如按钮、span、输入框等。
问题是当 div 插入到页面时,页面的 css 会影响 div 及其内容。
例如,如果页面具有诸如 : 之类的 css,
span {
text-shadow: 1px 1px 1px blue;
}
那么我动态添加的 div 中的跨度具有蓝色文本阴影。我正在做的解决这个问题的方法是设置任何可能影响我的 div 内容的指令!重要的是,就像
mydiv span {
text-shadow: none !important;
}
它是垃圾。
是否有任何明智的方法来覆盖给定项目的 css,从而将其恢复为浏览器(google-chrome)默认值?
谢谢。
My browser extension embeds a div item to webpages opened by browser on the fly. div contains several children items such as buttons, spans, input boxes etc.
Problem is when div is inserted to page, page's css affects the div and it's contents.
For example if the page has a css such as :
span {
text-shadow: 1px 1px 1px blue;
}
then the spans in my on the fly added div have blue text shadows. What i'm doing to fix this is to set any possible directive that might affect my div's content with !important, like
mydiv span {
text-shadow: none !important;
}
and it's rubbish.
Is there any sane way to override css for a given item, that'll take it back to browser (google-chrome) defaults?
Thanks.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
遗憾的是,没有。在某些情况下,
auto
值将充当默认值,但并非总是如此,并且您仍然必须为每个可能的属性指定它。 CSS 的这一点确实很糟糕。不过,我想到了一个想法。鉴于您专门询问 Chrome,如果您控制所有 CSS 类并且不介意一些混乱,您可能可以像这样使用 CSS3 的
not
:如果您使用
not(.default)
在每个 CSS 规则中,如果给它们赋予default
类,则可以拥有具有默认行为的元素:我对 CSS 3 没有个人经验,但这应该工作。它无法在较旧的浏览器中工作,因此它(尚未)真正兼容主流。
Sadly, no. The
auto
value will act as the default under some conditions, but not always, and you still have to specify it for every possible property. This is something about CSS that really sucks.One idea comes to mind, though. Seeing as you're asking specifically about Chrome, if you control all the CSS classes and don't mind some clutter, you might be able to work with CSS3's
not
like so:If you use
not(.default)
in every CSS rule, you can have elements that have the default behaviour if you give them thedefault
class:I have no personal experience with CSS 3, but this should work. It will not work in older browsers, so it's not (yet) really mainstream compatible.
您无法“重置”CSS 规则,您必须覆盖它们 (
text-shadow:none;
)You cannot "reset" css rules, you have to override them (
text-shadow:none;
)