WP наложение css (вложенность плагинов) как изолировать?

Question

[Михаил]

Всем привет, скажу сразу что в фронтенде я пока полный нуб по этому не кидайте пожалуйста тапки на мою тупость.
Собственно трабл такой: есть некий плагин "Estimation & Payment Forms", он реализует возможность создавать и кастомизировать сложные и интерактивные калькуляторы. В базовых возможность реализована возможность в качестве блока использовать шорткод, что собственно я бы и хотел использовать. Но главная проблема в том что при размещении любого шорткода который будет встроен в слайд плагина, он будет перекрыт стилями самого плагина.

Скрин

Но самое непонятно происходит когда я нажимаю на этот "сломанный" элемент (несколько раз) он спустя секунду становиться снова таким как и должен быть.

Так должно быть

Изучив вопрос через две тул, я понял что на элементы действуют глобальные настройки стиля, ломая при этом его собственный. Авторы плагина сделал очень неприятную штуку:

Пример

#lfb_bootstraped.lfb_bootstraped div, #lfb_bootstraped.lfb_bootstraped span, #lfb_bootstraped.lfb_bootstraped object, #lfb_bootstraped.lfb_bootstraped iframe, #lfb_bootstraped.lfb_bootstraped h1, #lfb_bootstraped.lfb_bootstraped h2, #lfb_bootstraped.lfb_bootstraped h3, #lfb_bootstraped.lfb_bootstraped h4, #lfb_bootstraped.lfb_bootstraped h5, #lfb_bootstraped.lfb_bootstraped h6, #lfb_bootstraped.lfb_bootstraped p, #lfb_bootstraped.lfb_bootstraped blockquote, #lfb_bootstraped.lfb_bootstraped pre, #lfb_bootstraped.lfb_bootstraped abbr, #lfb_bootstraped.lfb_bootstraped address, #lfb_bootstraped.lfb_bootstraped cite, #lfb_bootstraped.lfb_bootstraped code, #lfb_bootstraped.lfb_bootstraped del, #lfb_bootstraped.lfb_bootstraped dfn, #lfb_bootstraped.lfb_bootstraped em, #lfb_bootstraped.lfb_bootstraped img, #lfb_bootstraped.lfb_bootstraped ins, #lfb_bootstraped.lfb_bootstraped kbd, #lfb_bootstraped.lfb_bootstraped q, #lfb_bootstraped.lfb_bootstraped samp, #lfb_bootstraped.lfb_bootstraped small, #lfb_bootstraped.lfb_bootstraped strong, #lfb_bootstraped.lfb_bootstraped sub, #lfb_bootstraped.lfb_bootstraped sup, #lfb_bootstraped.lfb_bootstraped var, #lfb_bootstraped.lfb_bootstraped b, #lfb_bootstraped.lfb_bootstraped i, #lfb_bootstraped.lfb_bootstraped dl, #lfb_bootstraped.lfb_bootstraped dt, #lfb_bootstraped.lfb_bootstraped dd, #lfb_bootstraped.lfb_bootstraped ol, #lfb_bootstraped.lfb_bootstraped ul, #lfb_bootstraped.lfb_bootstraped li, #lfb_bootstraped.lfb_bootstraped fieldset, #lfb_bootstraped.lfb_bootstraped form, #lfb_bootstraped.lfb_bootstraped label, #lfb_bootstraped.lfb_bootstraped legend, #lfb_bootstraped.lfb_bootstraped table, #lfb_bootstraped.lfb_bootstraped caption, #lfb_bootstraped.lfb_bootstraped tbody, #lfb_bootstraped.lfb_bootstraped tfoot, #lfb_bootstraped.lfb_bootstraped thead, #lfb_bootstraped.lfb_bootstraped tr, #lfb_bootstraped.lfb_bootstraped th, #lfb_bootstraped.lfb_bootstraped td, #lfb_bootstraped.lfb_bootstraped article, #lfb_bootstraped.lfb_bootstraped aside, #lfb_bootstraped.lfb_bootstraped figure, #lfb_bootstraped.lfb_bootstraped footer, #lfb_bootstraped.lfb_bootstraped header, #lfb_bootstraped.lfb_bootstraped menu, #lfb_bootstraped.lfb_bootstraped nav, #lfb_bootstraped.lfb_bootstraped section, #lfb_bootstraped.lfb_bootstraped time, #lfb_bootstraped.lfb_bootstraped mark, #lfb_bootstraped.lfb_bootstraped audio, #lfb_bootstraped.lfb_bootstraped video, #lfb_bootstraped.lfb_bootstraped details, #lfb_bootstraped.lfb_bootstraped summary {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-weight: normal;
    vertical-align: baseline;
    background: transparent;
}

Естественно что часть свойств находятся в перечёркнутом состоянии, но те что не определены самим элементом (который из шорткода), то те сватовства оказывают влияние на мой элемент.

Вопрос собственно в том, как мне экранировать элемент? Возможно ли это вообще как-то сделать? Что бы он жил своей полной и независимой жизнью)?

p.s | Как я понял, стили того элемента который я хочу отобразить через шорткод, загружаются через JS то есть порядок их доставки более приоритетный, а те что генерирует плагин уже накладываются на них. Видимо по этому возникает конфликт. Есть варианты как его исправить?

Comments

[Вова Дружаев]

Понимание каскадности, наследования, веса и порядка загрузки css https://www.youtube.com/watch?v=SttnGLN9gV4&list=P...
распинаться, говоря это в сотнюпервый раз - желания мало. Поэтому и было отснято видео где говорится об этом максимально простым языком и на пальцах. Ну а если и после этого понимания не будет - обращайся к фрилансерам кто эти простые азы освоил

[Михаил]

Владимир Дружаев, не смешно. По вашему я проблему не понял, и не нашел её? Вопрос был в том как её разрешить.

[Вова Дружаев]

Михаил, кто разве смеется?
Учитесь учиться.

Answer 1

[Михаил]

Костылём (но рабочим) пока нашел такое решение:

function css_to_wp_head() {
    wp_enqueue_style( 'wp_head_style1', get_stylesheet_directory_uri() . '/wp-content/plugins/js_composer/assets/js/dist/js_composer_front.min.js?ver=6.0.5', array(), null );
}

add_action( 'wp_footer', 'css_to_wp_head' , 100);

Comments

[Михаил]

Не, всё фигня. Полностью это проблему не решает.