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

发布于 2024-09-28 11:26:52 字数 446 浏览 4 评论 0原文

我的浏览器扩展将 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

从此见与不见 2024-10-05 11:26:52

是否有任何明智的方法可以将单个项目的 CSS 重置为浏览器默认值?

遗憾的是,没有。在某些情况下,auto 值将充当默认值,但并非总是如此,并且您仍然必须为每个可能的属性指定它。 CSS 的这一点确实很糟糕。

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

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

如果您使用 not(.default) 在每个 CSS 规则中,如果给它们赋予 default 类,则可以拥有具有默认行为的元素:

<div class="default">

我对 CSS 3 没有个人经验,但这应该工作。它无法在较旧的浏览器中工作,因此它(尚未)真正兼容主流。

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

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:

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

If you use not(.default) in every CSS rule, you can have elements that have the default behaviour if you give them the default class:

<div class="default">

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.

时光倒影 2024-10-05 11:26:52

您无法“重置”CSS 规则,您必须覆盖它们 (text-shadow:none;)

You cannot "reset" css rules, you have to override them (text-shadow:none;)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文