小部件的CSS盾

Question

我正在创建一个书签。它将在页面上显示一个小部件。但是，页面上的一些现有css可以影响我的小部件。怎么避免这个？我不想使用iframe。

Answer 1

使用本地化重置。

选择existing CSS reset（或自己动手），并将小部件的id（或类）放在其前面，将其命名为。

实施例

HTML

<div id="my-bookmarklet-panel">...</div>

CSS

#my-bookmarklet-panel a,
#my-bookmarklet-panel div,
#my-bookmarklet-panel span {
    /* Reset rules */
}

Answer 2

在我们的小部件CSS中使用！important语句来保护您的规则不被覆盖。