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不幸not supported by IE ≤8。

Answer 2

你需要做两件事。

i）提供您的父容器ID

ii）并且容器的样式子标签。

这是fiddle workout。

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

2 个答案: