Wie kann man !important außer Kraft setzen?

Question

Ich habe ein benutzerdefiniertes Stylesheet erstellt, das das ursprüngliche CSS für meine Wordpress-Vorlage überschreibt. Auf meiner Kalenderseite hat das Original-CSS jedoch die Höhe jeder Tabellenzelle mit dem !important Erklärung:

td {height: 100px !important}

Gibt es eine Möglichkeit, dies außer Kraft zu setzen?

Answer 1

Überschreiben des Modifikators !important

1. Fügen Sie einfach eine weitere CSS-Regel mit !important und geben Sie dem Selektor eine höhere Spezifität (indem Sie ein zusätzliches Tag, eine Id oder eine Klasse zum Selektor hinzufügen)
2. eine CSS-Regel mit demselben Selektor zu einem späteren Zeitpunkt als die bestehende hinzufügen (bei Gleichstand gewinnt die zuletzt definierte Regel).

Einige Beispiele mit höherer Spezifität (das erste ist am höchsten/übersteigt das zweite, das dritte ist am niedrigsten):

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

Oder fügen Sie denselben Selektor nach dem vorhandenen Selektor ein:

td {height: 50px !important;}

Haftungsausschluss:

Es ist fast nie eine gute Idee, die !important . Dies ist schlechte Technik von den Machern der WordPress-Vorlage. Auf virale Weise zwingt es die Nutzer der Vorlage, ihre eigenen !important Modifikatoren zu überschreiben, und es begrenzt die Optionen für die Überschreibung durch JavaScript.

Aber es ist nützlich zu wissen wie um sie außer Kraft zu setzen, wenn dies manchmal erforderlich ist.

Answer 2

Abgesehen vom Überschreiben eines Stils, der durch die Option style Attribut, das !important sollte nur verwendet werden, wenn Sie in Ihrem Stylesheet Selektoren mit widersprüchlichen Spezifität .

Aber auch bei widersprüchlicher Spezifität ist es besser, einen spezifischeren Selektor für die Ausnahme zu erstellen. In Ihrem Fall ist es besser, einen class in Ihrem HTML-Code, die Sie verwenden können, um einen spezifischeren Selektor zu erstellen, der nicht die !important Regel.

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

Ich persönlich benutze nie !important in meinen Formatvorlagen. Denken Sie daran, dass das C in CSS für Kaskadierung steht. Verwendung von !important wird dies brechen.

Answer 3

Jeder Teil des Namens eines Stils hat ein Gewicht, d. h. je mehr Elemente Sie haben, die sich auf diesen Stil beziehen, desto wichtiger ist er. Zum Beispiel

#P1 .Page {height:100px;}

ist wichtiger als:

.Page {height:100px;}

Wenn Sie also wichtige Informationen verwenden, sollten Sie dies idealerweise nur dann tun, wenn es wirklich notwendig ist. Um die Deklaration außer Kraft zu setzen, muss der Stil spezifischer gestaltet werden, aber auch mit einem Override. Siehe unten:

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

Answer 4

Haftungsausschluss: Vermeiden Sie !important um jeden Preis.

Dies ist ein schmutziger, schmutziger Hack, aber Sie können ein !important überschreiben, ohne ein !important, indem Sie eine (unendlich Schleife oder sehr lang anhaltende) Animation auf die Eigenschaft, die Sie versuchen, die importants auf überschreiben.

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

Answer 5

Überschreiben mit JavaScript

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

Hat bei mir funktioniert.