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

Question

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

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

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

#my-id * { //styles }

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

Answer 1

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

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

#someDiv .aClass a{float:left;}

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

你可以看到Truth的选择器也比这更低specificity，因此在这种情况下将无法超越客户端的样式。

您的问题非常相似：How to remove all inherited and computed styles from an element?

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

Answer 2

如果你只想最近这个特定的div，那么你所拥有的就好了。你忘了重置div本身了：

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

Answer 3

你可能正在寻找Eric CSS Reset，因为它是一个强有力的重置。

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