Блог

Главная - Вопросы по программированию - Как переопределить встроенный CSS с !важным значением?

Как переопределить встроенный CSS с !важным значением?

#css #wordpress

Вопрос:

Я разрабатываю веб-сайт на WordPress. Я хочу переопределить встроенное правило CSS для оформления меню в мобильном телефоне. Проблема в том, что встроенное правило имеет важное значение!. Я считаю, что встроенные стили генерируются динамически.

Встроенные стили:

 .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu{
  background-color: RGBA(0,0,0,0) !important;
}

Результат встроенного правила

Вот внешний стиль

 .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu{
  background-color: RGBA(10,14,13,0.9) !important;
  }

Результат внешнего правила

Я читал, что вы можете использовать JavaScript для переопределения встроенного правила, но не уверен, где разместить сообщение JavaScript.

Мы высоко ценим вашу проницательность.

Комментарии:

1. Фу. Встроенные стили, И они !important есть . Это, должно быть, грех. Автору этой темы следует дать пощечину. Это можно переопределить с помощью достаточно специфического селектора, но это было бы действительно некрасиво, поскольку встроенные стили имеют специфику 1000, и, следовательно, вам понадобится невероятно длинный неприятный селектор. Вы можете изменить встроенный стиль в Javascript с element.style.backgroundColor помощью .

2. убедитесь, что ваше !важное правило загружается после wordpress … например, создайте свой собственный CSS-файл и включите его в конце всего CSS worpdress

3. пс. Он думает, что вы не понимаете «встроенный стиль».

4. @David где именно в коде я бы разместил Javascript?

5. @Wordica У меня есть дочерняя тема, которая имеет свою собственную таблицу стилей и загружается после CSS основной темы. Поскольку правило здесь встроенное, оно переопределяет мою таблицу стилей.

Ответ №1:

В Js … но Вы должны знать, как и когда включать JS в function.php

 $(window).on("load", function() {

    $(body).find('.et_pb_menu_0_tb_header.et_pb_menu 
                  .et_mobile_menu).removeAttr("style");
    
    $(body).find('.et_pb_menu_0_tb_header.et_pb_menu 
                  .et_mobile_menu).css('background-color',"rgba(10,14,13,0.9)")
});

Если RGBA не будет работать, просто добавьте шестнадцатеричный цвет.

Метки: