Question

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

My Widgets拥有自己的小部件元素css。独立运行时效果很好。

但是当我将我的Widget添加到第三方网站时，我的小部件css继承或从第三方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类的后代。

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

不要用元素来塑造任何东西 - 所以不要做

p {
    /* Style here */
}

仅使用所有作用于.my-widget类的类。

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

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

Jquery Widget CSS与第三方网站冲突

1 个答案: