如何防止CSS影响外部插件？

Question

举个例子，我得到了一个CSS类，该类适用于网站中的所有标签。

label
{
 font-size: 18px;
}

现在，在安装外部JS插件后，我发现该插件本身受基本CSS影响。

<div>
    <div class="plugin" />
    <label>Xyz</label> 
    //Dynamic html inserted by plugin
</div>

该插件具有自己的样式表，因此如何防止我的基本CSS样式触摸插件div中的任何元素？

编辑

我必须添加标签是一个非常简单的示例。 实际布局更加复杂，全局样式涉及各种元素。

Answer 1

不要让CSS过于笼统，当您只想对某些元素进行样式设置时，请尝试使其尽可能具体。 如果您不能在不影响插件元素的情况下选择元素，请向它们添加一个类。

label{ /* too general, don't use this */
 /* ... */
}
body > div > form > label{ /* more specific, but maybe still affecting your plugin */
 /* ... */
}

label.noplugin{ /* use a class on non-plugin elements */
 /* ... */
}

div:not(.plugin) > label{ /* affecting only children of div which are NOT
    tagged with the plugin class */
 /* ... */
}

因此，在您的情况下，更好的样式标签样式是

<div>
    <div class="plugin">
    <label>Xyz</label>
    //Dynamic html inserted by plugin
    </div>
</div>

CSS：

*:not(.plugin) > label
{
 font-size: 18px;
}

请注意:not IE≤8不支持 :not 。

Answer 2

您需要做两件事。

i）提供您的父容器ID

ii）和容器的样式子标签。

这是小提琴锻炼 。