Css Javascript小部件影响其嵌入的页面样式

我目前正在开发一个可以嵌入页面的小部件。但是，当嵌入时，它会影响所嵌入页面的样式（字体、文本、布局等）

我想知道Clearspring和其他小部件框架如何封装它们的小部件，从而不影响嵌入页面

---

谢谢。

制作您的小部件，比如在一个div下使用唯一Id（或类，如果有多个Id的话），这是最不可能与主机页上的其他Id冲突的。一个很好的例子可能是

#公司widjet name

。查看jQuery UI是如何实现的（

.UI小部件输入

）

然后，您可能需要执行某种局部重置，以避免父页面的CSS填充您的设计。修改某物使之适合。请避免使用

#uniqueId*{padding:0，margin:0}

，因为它会引起头痛

只要你愿意

#uniqueId a {
    property: value;
}

---

特殊性应该足够强，以正确设置元素的样式，而不会让宿主页面的CSS无意中更改它。

考虑到这样一个事实，即大多数情况下，您永远不知道某个组件/小部件/块（无论您如何称呼它）如果要在网站上使用一次或多次，我会考虑最坏情况下的方法：因此只使用类名。