Come sovrascrivere! Importante?

Ho creato un foglio di stile personalizzato che sovrascrive il CSS originale per il mio modello Wordpress. Tuttavia, sulla mia pagina del calendario, il CSS originale ha l'altezza di ogni cella di tabella impostata con la !importantdichiarazione:

td {height: 100px !important}

C'è un modo per ignorarlo?

Sostituzione del modificatore! Important

1. Aggiungi semplicemente un'altra regola CSS con !importante assegna al selettore una specificità superiore (aggiungendo un tag, id o classe aggiuntivi al selettore)
2. aggiungere una regola CSS con lo stesso selettore in un momento successivo rispetto a quella esistente (in un pareggio, vince l'ultimo definito).

Alcuni esempi con una specificità superiore (il primo è il più alto / annulla, il terzo è il più basso):

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

Oppure aggiungi lo stesso selettore dopo quello esistente:

td {height: 50px !important;}

Disclaimer:

Non è quasi mai una buona idea usare !important. Questa è una cattiva ingegneria da parte dei creatori del modello WordPress. In modo virale, forza gli utenti del modello ad aggiungere i propri !importantmodificatori per sovrascriverlo e limita le opzioni per sovrascriverlo tramite JavaScript.

Ma è utile sapere come sostituirlo, se a volte è necessario.

La !importantdeve essere utilizzato solo quando si dispone di selettori nel foglio di stile con contrastanti specificità .

Ma anche quando si ha una specificità contrastante, è meglio creare un selettore più specifico per l'eccezione. Nel tuo caso è meglio avere un classnel tuo HTML che puoi usare per creare un selettore più specifico che non ha bisogno della !importantregola.

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

Personalmente non uso mai !importantnei miei fogli di stile. Ricorda che la C in CSS è per cascata. L'uso !importantromperà questo.

Dichiarazione di non responsabilità: evitare! Importante a tutti i costi.

Questo è un trucco sporco, sporco, ma puoi sovrascrivere un! Importante, senza! Importante, usando un'animazione (infinitamente ciclica o di lunga durata) sulla proprietà su cui stai tentando di ignorare gli importatori.

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

Bene, ecco una breve lezione sull'importanza dei CSS. Spero che il seguito ti aiuti!

Prima di tutto, ogni parte del nome dello stile è una ponderazione, quindi più elementi hai che si riferiscono a quello stile, più è importante. Per esempio

#P1 .Page {height:100px;}

è più importante di:

.Page {height:100px;}

Quindi, quando si usa importante, idealmente questo dovrebbe essere usato sempre e solo quando veramente necessario. Quindi, per evitare la declerazione, rendi lo stile più specifico, ma anche con una sostituzione. Vedi sotto:

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

Spero che aiuti!!!

Sostituisci usando JavaScript

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

Ha funzionato per me.

Anche questo può aiutare

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

Questo sostituirà qualsiasi stile in linea

In ogni caso, puoi eseguire l'override heightcon max-height.

Vorrei aggiungere una risposta a ciò che non è stato menzionato, poiché ho provato tutto quanto sopra senza alcun risultato. La mia situazione specifica è che sto usando semantic-ui, che ha incorporato !importantattributi su elementi (estremamente fastidiosi). Ho provato di tutto per ignorarlo, solo alla fine ha funzionato una cosa (usando jquery). È come segue:

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