Question

我正在创建一个HTML片段，以允许其他人为他们的网站添加功能（这是一个投票小工具）。我已经创建了一个像这样的HTML片段：

<div>
   [implementation of my voting widget]
</div>

我花了很多时间来正确地使用这个小部件的格式。它在不导入样式表的示例网页中非常有用。

然而，当我将小部件添加到Drupal站点上的页面时，导入的CSS会严重破坏我的格式化。我希望我的HTML代码段忽略所有CSS样式表。这可能吗？

无论是否可行，是否有更好的解决方案？

Answer 1

您不应依赖于未被任何导入的样式表覆盖的CSS样式，而应该为您的窗口小部件提供唯一的ID，并确保所有样式都是该id的派生物，确保实现您不想要的任何样式被覆盖（margin，padding等）：

<div id="votify">
   [implementation of my voting widget]
</div>

#votify {}
#votify ul {}
#votify div span {}
/* etc */

Answer 2

您可以尝试使用重置样式表：

http://meyerweb.com/eric/tools/css/reset/

当然，您不想覆盖页面的CSS，但您可以了解如何重置窗口小部件使用的样式并使用您的个人CSS。所以......就像......

#voting-widget * {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

我希望这会有所帮助。

Answer 3

将小部件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;
}

Answer 4

如果不使用样式表，我认为您必须在样式属性中明确设置所有边距，填充，字体等，因此它优先于任何CSS工作表。

如何清除所有CSS样式

4 个答案: