Отключить / удалить default !важные объявления в элементах

#javascript #php #jquery #css #wordpress

#javascript #php #jquery #css #wordpress

Вопрос:

У меня происходит конфликт CSS с основным плагином на моем сайте WordPress. Создатель плагина счел удобным добавить объявления !important во все свои таблицы стилей. С точки зрения разработчика; это катастрофа. В свою защиту они хотят охватить все темы, в которых используются объявления !important, чтобы это выглядело согласованно. Я не согласен, поэтому мне нужно решение.

Что происходит, так это то, что моя премиум тема, которая не использует эти объявления, не может переопределить стиль. У меня есть несколько решений для удаления определенных классов с помощью jQuery.

Но есть проблема, которая не может быть решена путем удаления классов. Например, привязка :hover по умолчанию, как border: none !important в плагине. Но я хотел бы видеть, что опция привязки: наведение границы фактически применяется через настройки темы. Применяемый CSS таков (имейте в виду, что .plugin класс не применяется в привязке, только из файла CSS):

.plugin a { border: none !important; }

Есть ли какой-либо способ отключить определенные комбинации классов из DOM? Я рад, что это сделано с помощью php or jQuery . Что-то вроде: .plugin is not applied to anchor Я понятия не имею, как это решить.

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

1. Я пытался удалить файл CSS с помощью jQuery, но это устраняет также некоторые необходимые стили.

Ответ №1:

Конечно, это всего лишь случай перезаписи css с помощью более точно указанной строки css.

Например, если код является:

 .plugin a::hover { border: none !important; }
  

Вы можете перезаписать это, выполнив:

 body .plugin a::hover { border: 1px solid grey !important; }
  

Поскольку вы добавили элемент body в свою строку css, это добавляет дополнительную специфичность, то есть перезаписывает css плагинов. К сожалению, вам придется использовать !important , поскольку !important выбрасывает обычную спецификацию, исключающую окно (плохой создатель плагина).

Подробнее о специфике css читайте здесь

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

1. Спасибо за ваш ответ, это альтернативное решение, но я бы хотел, чтобы настройки темы использовали стиль привязки. Потому что я стремлюсь к последовательному способу оформления.

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

Ответ №2:

Вам нужен какой-либо из стилей, предоставляемых плагином? Если нет, то, возможно, стоит подумать о полном удалении стилей плагина из очереди и просто добавить свои собственные стили, где тема этого не касается.

Если вы узнаете зарегистрированное имя таблицы стилей (должно быть в теге style), вы можете удалить его из очереди с помощью чего-то вроде:

 function remove_push_plugin_styles() {
   wp_dequeue_style( 'plugin-stylesheet' );
}
add_action( 'wp_print_styles', 'remove_pushy_plugin_styles', 1000 );

  

Ответ №3:

Вы не можете редактировать содержимое iframe, верно. Но сам iframe по-прежнему принадлежит вашей странице, и вы можете редактировать атрибуты. Я только что протестировал и смог сделать что-то похожее на:

 var i = $('div.item iframe');
// Did the selector work?
console.log(i.length);
i.removeAttr('width');
i.removeAttr('height');
  

Как говорится, использование !important в этой ситуации неплохо. Если вы беспокоитесь об обслуживании CSS, оставьте комментарий, что !important переопределяет атрибуты элемента. !important часто демонизируется, но в данном случае это допустимое использование для повышения специфичности вашего CSS.

Преимущество выполнения этого в CSS заключается в том, что это будет применяться до загрузки вашего JavaScript, поэтому вы не получите доли секунды применения этих атрибутов и стилей до того, как JavaScript удалит стили.

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

1. iframe? Где вы видите это в моем вопросе?