Jquery Widget CSS 与第三方网站冲突

Question

我创建了一个用于许多第三方网站的 Jquery 小部件。

我的小部件有它自己的小部件元素 css。独立运行时完​​美运行。

但是当我将我的小部件添加到第 3 方网站时，我的小部件 css 继承或取自第 3 方 CSS。

由于我不了解 3rd 方 css，如何解决此问题？

#my-div * {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;

...
}

Answer 1

将您的 css 限定为小部件的 html。

例如为您的小部件创建一个包装器：

<div class="my-widget">
    <!-- Widget Content Here -->
</div>

然后将小部件中的所有内容设置为 my-widget 类的后代。

.my-widget .widget-text {
    color: green;
}

不要用元素设计任何东西 - 所以不要这样做

p {
    /* Style here */
}

仅使用所有范围为您的 .my-widget 类的类。

根据您的评论，如果您仍然遇到问题，您可以在小部件范围内添加重置：

.my-widget * {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 16px;
    /* Etc */
}