Jquery Widget CSS与第三方网站冲突

Question

我创建了一个Jquery小部件，它在许多第三方网站中使用。

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

但是当我把我的Widget添加到第三方网站时，我的widgetcss继承或取自第三方css。

如何解决这个问题，因为我不知道第三方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 .widget-text {
    color: green;
}

不要用元素来设计任何东西——所以不要做

p {
    /* Style here */
}

只使用所有作用域为.my小部件类的类。

根据你的评论，如果你仍然遇到问题，你可以在你的小工具范围内添加一个重置：

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