Como substituir! Importante?

Eu criei uma folha de estilos personalizada que substitui o CSS original do meu modelo do Wordpress. No entanto, na minha página de calendário, o CSS original tem a altura de cada célula da tabela definida com a !importantdeclaração:

td {height: 100px !important}

Existe alguma maneira de substituir isso?

Substituindo o modificador! Important

1. Basta adicionar outra regra CSS !importante dar ao seletor uma especificidade mais alta (adicionar uma tag, ID ou classe adicional ao seletor)
2. adicione uma regra CSS com o mesmo seletor em um ponto posterior ao existente (em um empate, o último definido vence).

Alguns exemplos com uma especificidade mais alta (primeiro é o mais alto / substitui, o terceiro é o mais baixo):

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

Ou adicione o mesmo seletor após o existente:

td {height: 50px !important;}

Aviso Legal:

Quase nunca é uma boa ideia usar !important. Isso é péssimo em engenharia pelos criadores do modelo WordPress. De maneira viral, força os usuários do modelo a adicionar seus próprios !importantmodificadores para substituí-lo e limita as opções para substituí-lo via JavaScript.

Mas é útil saber como substituí-lo, se você precisar.

A !importantsó deve ser usado quando você tem seletores em sua folha de estilo com conflitantes especificidade .

Mas mesmo quando você tem especificidade conflitante, é melhor criar um seletor mais específico para a exceção. No seu caso, é melhor ter um classcódigo HTML no qual você possa usar para criar um seletor mais específico que não precise da !importantregra.

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

Eu pessoalmente nunca uso !importantem minhas folhas de estilo. Lembre-se de que o C em CSS é para cascata. Usar !importantquebrará isso.

Isenção de responsabilidade: evite! Importante a todo custo.

Este é um truque sujo, mas você pode substituir um! Importante, sem um! Importante, usando uma animação (loop infinito ou de longa duração) na propriedade em que você está tentando substituir os importantes.

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

Ok, aqui está uma lição rápida sobre a importância do CSS. Espero que o abaixo ajude!

Antes de tudo, todas as partes dos estilos são nomeadas como ponderação; portanto, quanto mais elementos você tem, relacionados a esse estilo, mais importante é. Por exemplo

#P1 .Page {height:100px;}

é mais importante que:

.Page {height:100px;}

Portanto, ao usar importante, idealmente, isso só deve ser usado quando realmente necessário. Portanto, para substituir a declinação, torne o estilo mais específico, mas também com uma substituição. Ver abaixo:

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

Eu espero que isso ajude!!!

Substituir usando JavaScript

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

Trabalhou para mim.

Isso também pode ajudar

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

Isso substituirá qualquer estilo embutido

Em qualquer caso, você pode substituir heightpor max-height.

Gostaria de acrescentar uma resposta que não foi mencionada, pois tentei todas as opções acima sem sucesso. Minha situação específica é que estou usando a interface semântica-ui, que tem !importantatributos incorporados nos elementos (extremamente irritante). Eu tentei de tudo para substituí-lo, apenas no final uma coisa funcionou (usando jquery). É o seguinte:

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