将Google Chrome浏览器中的单个项目的CSS重置为浏览器默认值 [英] Resetting css to browser defaults for a single item in google chrome

问题描述

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

问题是当div插入页面时，页面的css影响div和它的内容。

例如，如果页面有一个如下所示的css：

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

然后在我的飞行中添加div有蓝色文字阴影。我正在做什么来解决这个问题是设置任何可能的指令，可能会影响我的div的内容！重要的，如

  mydiv span {
 text-shadow：none！important; 
} 
  

它是垃圾。

是否有任何理智的方式来覆盖给定项目的css，这将回到浏览器（谷歌浏览器）默认值？

谢谢。

p>

解决方案

是否有任何理智的方法将css重置为浏览器默认值只有一个项目？ p>

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

不过，想到一个想法。看到您专门询问Chrome的时候，如果您控制了所有的CSS类并且不介意混乱，那么您可以使用CSS3的而不是，如下所示：

  span：not（.default）{
 text-shadow：1px 1px 1px blue;如果您使用 not（.default） 
 
 
 
 
 $ b 在每个CSS规则中，如果您给它们默认类，那么您可以拥有默认行为的元素：
 < div class =default> 
  
我对CSS 3没有个人经验，但这应该起作用。它在旧版浏览器中不起作用，所以它现在还不是真正的主流兼容。
 
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.
解决方案

  
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.

                        
这篇关于将Google Chrome浏览器中的单个项目的CSS重置为浏览器默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！