Как я могу предотвратить влияние CSS на внешние плагины?

Question

В качестве примера я получил класс css, который применяется ко всем ярлыкам на моем сайте.

label
{
 font-size: 18px;
}

Теперь, после установки внешнего плагина JS, я обнаружил, что мой базовый CSS влияет на сам плагин.

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

Плагин имеет свою собственную таблицу стилей, так как я могу предотвратить касание моего базового стиля CSS любых элементов в модуле div плагина?

EDIT

Я должен добавить, что этот ярлык был очень простым примером. Фактический макет является более сложным с глобальными стилями, касающимися различных элементов.

Answer 1

Вам нужно сделать две вещи.

i) Укажите идентификатор родительского контейнера

ii) И стиль дочерней этикетки контейнера.

Вот тренировка по скрипке .

Answer 2

Не делайте свой 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 & le; 8 .