在特定元素上重置 CSS 样式的最佳实践方法？答案

【问题标题】：Best-practice approach to reset CSS styles on a specific element?在特定元素上重置 CSS 样式的最佳实践方法？
【发布时间】：2012-04-27 20:41:27
【问题描述】：

我正在构建一个 html5/js/css 应用程序，该应用程序将存在于我客户现有 html 的 div 中。我想确保我的应用程序没有继承任何客户端的 CSS 样式。

是否有重置此 div 及其后代元素的最佳做法？

我想我会使用类似的东西：

#my-id * { //styles }

我想知道是否有更好/最佳实践的方法？谢谢。

【问题讨论】：

标签： css html

【解决方案1】：

这将很难/可能无法确保。 Starx 所指的解决方案类型假定除了浏览器默认值之外没有预设样式，并且在该上下文中“重置”是指协调各种浏览器默认值之间的不一致。

但在您的情况下，您的客户端 CSS 可能已经包含高度特定的选择器，例如

#someDiv .aClass a{float:left;}

...并应用那些“CSS 重置”解决方案根本不会覆盖它。

您可以看到，Truth 的选择器的 specificity 也低于此值，因此在这种情况下将无法覆盖客户端的样式。

所以简短的回答是：没有办法确保这一点，因为你不能“从一个元素中删除所有继承和计算的样式”...... 更新： ...除非你能预料到并且用具有适当特性的新声明覆盖每个预先存在的样式声明。

【讨论】：

... 这就是为什么，例如，所有大型社交媒体公司（Google+、FB、Twitter）在您包含他们的小部件时不会将他们的分享按钮写入您的页面——那里他们不可能确保他们想要的样式的完整性（阅读：品牌），所以他们 iFrame 将它们放入。
这很有趣。我没有考虑特定的选择器。我计划“命名空间”我的类和 ID（例如“my-app-classname”）以避免冲突，但请记住这一点。似乎有可能在文档中的某个位置继承一个预定义的类。谢谢。

【解决方案2】：

如果您只想更新这个特定的 div，那么您所拥有的就可以了。你忘了重置 div 本身：

#my-id, #my-id * { /* styles */ }

【讨论】：

【解决方案3】：

您可能正在寻找 Eric 的 CSS Reset，因为它是强大的重置之一。

但重置规则适用于整个页面，而不仅仅是框。所以，修改规则，保持#my-id在前面。

【讨论】：