Як перекрити! Важливо?

Я створив спеціальний аркуш стилів, який замінює оригінальний 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.

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

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