如何防止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）和容器的樣式子標簽。

這是小提琴鍛煉 。