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

Question

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

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

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

#my-id * { //styles }

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

Answer 1

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

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

#someDiv .aClass a{float:left;}

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

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

您的问题非常相似：如何从元素中删除所有继承和计算的样式？

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

Answer 2

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

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

Answer 3

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

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