Jak zastąpić! Ważne?

Stworzyłem niestandardowy arkusz stylów, który zastępuje oryginalny CSS dla mojego szablonu Wordpress. Jednak na mojej stronie kalendarza oryginalny CSS ma wysokość każdego zestawu komórek tabeli z !importantdeklaracją:

td {height: 100px !important}

Czy jest jakiś sposób, aby to zmienić?

Przesłanianie! Ważnego modyfikatora

1. Wystarczy dodać kolejną regułę CSS za pomocą !importanti nadać selektorowi większą specyficzność (dodając dodatkowy znacznik, identyfikator lub klasę do selektora)
2. dodaj regułę CSS z tym samym selektorem w późniejszym momencie niż istniejący (w remisie wygrywa ostatni zdefiniowany).

Niektóre przykłady o wyższej specyficzności (pierwszy jest najwyższy / zastępuje, trzeci jest najniższy):

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

Lub dodaj ten sam selektor po istniejącym:

td {height: 50px !important;}

Zrzeczenie się:

Prawie nigdy nie jest dobrym pomysłem !important. To zła inżynieria twórców szablonu WordPress. W sposób wirusowy zmusza użytkowników szablonu do dodawania własnych !importantmodyfikatorów, aby go przesłonić, i ogranicza opcje zastępowania go przez JavaScript.

Ale warto wiedzieć, jak to zmienić, jeśli czasem trzeba.

Tej opcji !importantnależy używać tylko wtedy, gdy w arkuszu stylów znajdują się selektory o sprzecznej specyficzności .

Ale nawet jeśli masz sprzeczną specyfikę, lepiej jest utworzyć bardziej szczegółowy selektor wyjątku. W twoim przypadku lepiej jest mieć classw kodzie HTML, którego można użyć do stworzenia bardziej szczegółowego selektora, który nie potrzebuje !importantreguły.

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

Osobiście nigdy nie używam !importantw moich arkuszach stylów. Pamiętaj, że C w CSS służy do kaskadowania. Używanie !importantto zepsuje.

Oświadczenie: Unikaj! Ważne za wszelką cenę.

Jest to brudny, brudny hack, ale możesz zastąpić! Ważne, bez! Ważne, używając animacji (nieskończenie zapętlonej lub bardzo długotrwałej) na nieruchomości, na którą próbujesz przesłonić importerów.

@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>

Dobra, oto krótka lekcja na temat znaczenia CSS. Mam nadzieję, że poniższe informacje pomogą!

Przede wszystkim każda część stylów określa się jako wagę, więc im więcej elementów związanych z tym stylem, tym ważniejsze jest. Na przykład

#P1 .Page {height:100px;}

jest ważniejsze niż:

.Page {height:100px;}

Tak więc, gdy używasz ważnego, idealnie powinno się go używać tylko wtedy, gdy naprawdę jest naprawdę potrzebne. Aby pominąć declerację, uszczegółowić styl, ale także z przesłonięciem. Patrz poniżej:

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

Mam nadzieję, że to pomoże!!!

Zastąp za pomocą JavaScript

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

Pracował dla mnie.

To też może pomóc

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

Spowoduje to zastąpienie dowolnego stylu wbudowanego

W każdym razie możesz zastąpić za heightpomocą max-height.

Chciałbym dodać odpowiedź na to pytanie, o której nie wspomniano, ponieważ próbowałem wszystkich powyższych bezskutecznie. Moja szczególna sytuacja polega na tym, że korzystam z semantycznego interfejsu użytkownika, który ma wbudowane !importantatrybuty elementów (bardzo denerwujące). Próbowałem wszystkiego, aby to zastąpić, ale w końcu jedna rzecz zadziałała (używając jquery). Jest to następujące:

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