CSS：命名空间的一块HTML

我正在构建一个浏览器扩展插件，将HTML插入一些页面。我希望页面的CSS不适用于此部分。做这个的最好方式是什么？是否有一个很好的重置，我可以把它放在我的HTML的根元素上，并将其设置为！重要，以便在其他人之后应用！CSS：命名空间的一块HTML

来源

2010-04-20 Paul Tarjan

还有这个http://snipplr.com/view/7438/element-specific-css-reset/ – ant 2010-04-20 08:01:09

至100％拿出来级联的唯一办法是把它的iframe内。

你可以使用一个CSS样式表复位，但只是前面加上你的根元素ID /课堂上的一切。这将对抗这些效果很长的路要走，但在这个领域你可能不得不做一些更多的最终调整。

也许最好的办法是简单地设置你的子规则一切合理的财产。所以我的意思是设置背景，前景，字体，大小等等等。完全定义规则，以便他们准确地说出你想要的内容，并且不会留下任何空间让级联填充默认值感兴趣的

来源

2010-04-20 07:29:39 rtpHarry

如果我做一个IFRAME，那么我无法从页面上的javascript与它进行交互（由于跨域策略）:( – 2010-04-20 16:21:17

是的我同意，iframe不是一个很好的解决方案，但在阻止css方面它是100％的解决方案。如果这是为你自己使用，那么我只需设置一堆规则，！对他们很重要，并且完全定义了你希望盒子的工作方式，可能会出现一些情况，有些东西会泄漏，但是如果你正在消耗这些东西，那么打破它时应该很简单，这是为你还是为了重新分配？ – rtpHarry 2010-04-21 08:21:00

重新分配:(我想我将不得不广泛测试它，我怀疑人们会修补它.. – 2010-04-22 16:05:36

你可以使用一个CSS复位，它仅适用于你的页面的一个子集。例如this one。

My page 
<div id="no-css"> 
blah blah this has no css 
</div>

当然，你必须在复位范围内的一切，例如：

ol, ul { 
    list-style: none; 
}

应该是：

#no-css ol, #no-css ul { 
    list-style: none; 
}

为了简化这个问题，我建议使用CSS “框架”像Less它简化了这样的事情：

#no-css{ 
    /* Big copy and paste of all the reset css file */ 
}

使用这个较少的代码，您可以使用较少的代码，或者只是生成一个新的reset.css文件并正常使用它。

当然，你也可以找到一个element specific reset但是这种解决方案可以让你选择你喜欢的任何复位之最。

另一种解决方案是将页面嵌入到iframe中。

来源

2010-04-20 08:05:19 marcgg

我在我的元素上设置一个根类，并把一个完整的重置它（第一个评论中的那个）。然后我在里面有子类（比如'title'），但是那个页面的CSS'.title {background：blue}'应用得比我的'.paulsnamespace {background：none}'更紧密。我怎么能阻止呢？ – 2010-04-20 16:20:22

这似乎仍然是2012年最好的方式 - 我用它来命名空间我的网站在萨斯的网页。这是我唯一使用ID的方式 - 它们通过静态站点生成器自动分配给元素，然后所有页面的CSS通过Sass“'@ import”进行连接。 – iono 2012-12-04 08:42:11

CSS：命名空间的一块HTML

回答

相关问题