Html 如何清除所有css样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5454593/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to clear all css styles
提问by gaefan
I'm creating a snippet of HTML to allow others to add functionality to their web sites (it is a voting widget). I've created a snippet of HTML like this:
我正在创建一个 HTML 片段，以允许其他人向他们的网站添加功能（它是一个投票小部件）。我已经创建了这样的 HTML 片段：
<div>
[implementation of my voting widget]
</div>
I spent a lot of time to get the formatting of this widget just right. It works great in a sample web page that does not import a style sheet.
我花了很多时间让这个小部件的格式恰到好处。它在不导入样式表的示例网页中效果很好。
When I add the widget to a page on a Drupal site, however, the imported CSS wreaks havoc with my careful formatting. I'd like my HTML snippet to ignore all CSS style sheets. Is this possible?
然而，当我将小部件添加到 Drupal 站点上的页面时，导入的 CSS 对我仔细的格式造成了严重破坏。我希望我的 HTML 片段忽略所有 CSS 样式表。这可能吗？
Regardless of whether it is possible, is there a better solution?
不管是否可能，有没有更好的解决方案？
采纳答案by mVChr
Instead of relying on your CSS styles not being overridden by any imported stylesheets, you should give your widget a unique id and make sure all of your styles are a derivative of that id making sure to implement any styles you don't want to be overriden (margin, padding, etc):
与其依赖于你的 CSS 样式不被任何导入的样式表覆盖，你应该给你的小部件一个唯一的 id，并确保你的所有样式都是该 id 的衍生物，确保实现任何你不想被覆盖的样式（margin，padding等）：
<div id="votify">
[implementation of my voting widget]
</div>
#votify {}
#votify ul {}
#votify div span {}
/* etc */
回答by Hristo
You could try using a reset stylesheet:
您可以尝试使用重置样式表：
http://meyerweb.com/eric/tools/css/reset/
http://meyerweb.com/eric/tools/css/reset/
Of course, you don't want to overwrite the page's CSS but you can get an idea on how to reset the styles your widget uses and use your personal CSS. So something like...
当然，您不想覆盖页面的 CSS，但您可以了解如何重置小部件使用的样式并使用您的个人 CSS。所以像...
#voting-widget * {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
I hope this helps.
我希望这有帮助。
回答by James Skidmore
Reset your widget CSS to default values, and THEN add your formatting code. This will clear out any page styles so you can work from a clean slate.
将您的小部件 CSS 重置为默认值，然后添加您的格式代码。这将清除所有页面样式，以便您可以从头开始工作。
div#widget, div#widget * {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
/* ... whatever other reset code ... */
/* ... then add your own code ... */
color: red;
}
回答by Andrew Cooper
Without using a style sheet I think you'd have to explicitly set all margins, padding, fonts, etc in the style attribute so it takes precedence over any CSS sheets that there are.
如果不使用样式表，我认为您必须在 style 属性中明确设置所有边距、填充、字体等，以便它优先于现有的任何 CSS 表。
