Wie überschreiben! Wichtig?

Ich habe ein benutzerdefiniertes Stylesheet erstellt, das das ursprüngliche CSS für meine Wordpress-Vorlage überschreibt. Auf meiner Kalenderseite hat das ursprüngliche CSS jedoch die Höhe jeder Tabellenzelle, die mit der !importantDeklaration festgelegt wurde:

td {height: 100px !important}

Gibt es eine Möglichkeit, dies zu überschreiben?

Überschreiben des! Modifikators!

1. Fügen Sie einfach eine weitere CSS-Regel mit hinzu !importantund geben Sie dem Selektor eine höhere Spezifität (Hinzufügen eines zusätzlichen Tags, einer ID oder einer Klasse zum Selektor).
2. Fügen Sie zu einem späteren Zeitpunkt als der vorhandenen eine CSS-Regel mit demselben Selektor hinzu (bei einem Unentschieden gewinnt die zuletzt definierte Regel).

Einige Beispiele mit einer höheren Spezifität (erstens ist am höchsten / überschreibt, drittens 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 hinzu:

td {height: 50px !important;}

Haftungsausschluss:

Es ist fast nie eine gute Idee zu verwenden !important. Dies ist eine schlechte Technik der Entwickler der WordPress-Vorlage. Auf virale Weise werden Benutzer der Vorlage gezwungen, ihre eigenen !importantModifikatoren hinzuzufügen , um sie zu überschreiben, und die Optionen zum Überschreiben über JavaScript werden eingeschränkt.

Es ist jedoch hilfreich zu wissen, wie man es überschreibt, wenn dies manchmal erforderlich ist.

Das !importantsollte nur verwendet werden, wenn Ihr Stylesheet Selektoren mit widersprüchlicher Spezifität enthält .

Aber selbst wenn Sie widersprüchliche Spezifitäten haben, ist es besser, einen spezifischeren Selektor für die Ausnahme zu erstellen. In Ihrem Fall ist es besser, eine classin Ihrem HTML zu haben, mit der Sie einen spezifischeren Selektor erstellen können, der die Regel nicht benötigt !important.

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

Ich persönlich verwende es nie !importantin meinen Stylesheets. Denken Sie daran, dass das C in CSS für die Kaskadierung vorgesehen ist. Die Verwendung !importantwird dies brechen.

Haftungsausschluss: Vermeiden Sie! Wichtig um jeden Preis.

Dies ist ein schmutziger, schmutziger Hack, aber Sie können einen! Wichtigen, ohne! Wichtigen überschreiben, indem Sie eine (Endlosschleifen- oder sehr lang anhaltende) Animation für die Eigenschaft verwenden, für die Sie die Importanten überschreiben möchten.

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

Okay, hier ist eine kurze Lektion über CSS-Wichtigkeit. Ich hoffe, dass das unten hilft!

Zuallererst wird jeder Teil des Stils als Gewichtung bezeichnet. Je mehr Elemente Sie haben, die sich auf diesen Stil beziehen, desto wichtiger ist er. Beispielsweise

#P1 .Page {height:100px;}

ist wichtiger als:

.Page {height:100px;}

Wenn Sie also wichtig verwenden, sollte dies idealerweise immer dann verwendet werden, wenn es wirklich wirklich benötigt wird. Um die Dekleration zu überschreiben, sollten Sie den Stil spezifischer gestalten, aber auch überschreiben. Siehe unten:

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

Ich hoffe das hilft!!!

Mit JavaScript überschreiben

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

Hat für mich gearbeitet.

Das kann auch helfen

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

Dadurch wird jeder Inline-Stil überschrieben

Auf jeden Fall können Sie außer Kraft setzen heightmit max-height.

Ich möchte eine Antwort hinzufügen, die nicht erwähnt wurde, da ich alle oben genannten Punkte ohne Erfolg ausprobiert habe. Meine spezielle Situation ist, dass ich die semantische Benutzeroberfläche verwende, die !importantAttribute für Elemente eingebaut hat (äußerst ärgerlich). Ich habe alles versucht, um es zu überschreiben, nur am Ende hat eines funktioniert (mit jquery). Es ist wie folgt:

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