Как переопределить! Важно?

Я создал собственную таблицу стилей, которая переопределяет исходный CSS для моего шаблона Wordpress. Однако на моей странице календаря исходный CSS имеет высоту каждой ячейки таблицы, установленную с помощью !importantобъявления:

td {height: 100px !important}

Есть ли способ, которым я могу переопределить это?

Переопределение важного модификатора!

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

Некоторые примеры с более высокой специфичностью (первый - самый высокий / переопределяет, третий - самый низкий):

table td    {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}

Или добавьте тот же селектор после существующего:

td {height: 50px !important;}

Отказ от ответственности:

Это почти никогда не хорошая идея для использования !important. Это плохая инженерия создателей шаблона WordPress. Вирусным способом он заставляет пользователей шаблона добавлять свои собственные !importantмодификаторы для его переопределения и ограничивает возможности переопределения его с помощью JavaScript.

Но полезно знать, как это переопределить, если иногда это необходимо.

!importantСледует использовать только тогда , когда у вас есть селекторы в таблице стилей с противоречивой специфичностью .

Но даже если у вас противоречивая специфика, лучше создать более конкретный селектор для исключения. В вашем случае лучше иметь classв своем HTML-код, который вы можете использовать для создания более конкретного селектора, который не нуждается в !importantправиле.

td.a-semantic-class-name { height: 100px; }

Я лично никогда не использую !importantв своих таблицах стилей. Помните, что C в CSS предназначен для каскадирования. Использование !importantсломает это.

Отказ от ответственности: Избегайте! Важно любой ценой.

Это грязный, грязный хак, но вы можете переопределить! Важное, но не важно!, Используя (бесконечный цикл или очень длительный) анимацию для свойства, которое вы пытаетесь переопределить для импортирующих.

@keyframes forceYellow {
  from {
    background-color: yellow;
  }
  to {
    background-color: yellow;
  }
}

div {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background: red !important;
  animation: 1s linear infinite forceYellow;
}

<div></div>

Хорошо, вот небольшой урок о важности CSS. Я надеюсь, что ниже поможет!

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

#P1 .Page {height:100px;}

важнее чем:

.Page {height:100px;}

Таким образом, при использовании важно, в идеале это следует использовать только тогда, когда это действительно необходимо. Таким образом, чтобы переопределить замедление, сделайте стиль более конкретным, но также и с переопределением. Увидеть ниже:

td {width:100px !important;}
table tr td .override {width:150px !important;}

Надеюсь, это поможет!!!

Переопределить с помощью JavaScript

$('.mytable td').attr('style', 'display: none !important');

Работал на меня.

Это тоже может помочь

td[style] {height: 50px !important;}

Это заменит любой встроенный стиль

В любом случае вы можете переопределить heightс помощью max-height.

Я хотел бы добавить ответ на этот вопрос, который не был упомянут, так как я пробовал все вышеперечисленное безрезультатно. Моя конкретная ситуация заключается в том, что я использую semantic-ui, который имеет встроенные !importantатрибуты элементов (очень раздражает). Я перепробовал все, чтобы переопределить это, только в конце концов сделал одну вещь (с помощью jquery). Это выглядит следующим образом:

$('.active').css('cssText', 'border-radius: 0px !important');