仅适用于 #widget 的 CSS 重置
假设我有一个使用复杂 CSS 的小部件，并且必须嵌入多个都有 CSS 的网站中。
如果我在所有小部件的 CSS 规则前加上“#widget”前缀，它们将不适用于外部的任何内容，因此解决了一个问题。不幸的是，网站的 CSS 规则仍然会弄乱小部件。
如果我使用适当的重置规则重置#widget 内的所有 CSS，那么希望它们会覆盖所有外部规则，对吗？ （因为我的规则使用 #id 并且外部规则不知道我的小部件内的任何 id，所以它们无法覆盖它们，对吧？！尽管如此重要）
将所有 CSS 重置为已知状态的最佳方法是什么？大多数 CSS 重置从浏览器默认值开始，它们不会重置任意 CSS。是否有任何 CSS 重置无论如何都有效？
Let's say I have widget that uses complicated CSS, and must be embedded in multiple websites that all have their CSSes.
If I prefix all widget's CSS rules with "#widget", they won't apply to anything on the outside, so one problem fixed. Unfortunately CSS rules of the site can still mess the widget.
If I reset all CSS inside #widget with proper reset rules, then hopefully they will override all outside rules, right? (because my rules use #id and outside rules don't know any ids inside my widget, they cannot override them, right? !important notwithstanding)
What's the best way to reset all CSS to known state? Most CSS resets start from browser defaults, they don't reset arbitrary CSSes. Is there any CSS reset that works no matter what?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我在尝试解决同样的问题时遇到了 cleanslate.css：
https://github.com/premasagar/cleanslate
我还没有在生产中使用它，但它显然来自 BBC World Service 小部件的开发。
I came across cleanslate.css while trying to solve the same problem:
https://github.com/premasagar/cleanslate
I've not use it in production yet, but it apparently came out of the development of the BBC World Service widget.
是的，您的 CSS 应该覆盖小部件外部声明的任何内容，但您的重置必须非常全面。我建议使用 http://meyerweb.com/eric/thoughts/2007/05/01/reset -reloaded/，但您必须自己修改所有选择器。
我也想加强你的选择器，所以
而不是使用你的选择器。
现在你的选择器将具有更高的权重，
Yes, your css should override anything declared outside the widget, but your reset must be quite comprehensive. I suggest using a modified version of http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/, but you'll have to modify all the selectors yourself.
I would be tempted to strengthen your selectors also, so rather than
Use
Your selectors will now have a much higher weight.
使用命名空间 &重置&较少的
Use namespace & reset & LESS
我使用 Eric Meyer 的 Reset Reloaded 来重置 CSS 样式。
关联：
http://meyerweb.com/eric/thoughts/2007/05 /01/重置重新加载/
I use Eric Meyer's reset reloaded to reset CSS styles.
Link:
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/