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

Auch das kann helfen

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

Dies überschreibt alle Inlinestil

Answer 2

Sie können eine höhere Spezifität verwenden, indem Sie in Selektoren nach oben gehen.

td {height: 100px !important}
/* higher precedence */
table td {height: 200px !important}

Ich schrieb eine ausführlicher Artikel über das Überschreiben von CSS hier .

Answer 3

Es gibt einige moderne Ansätze, die noch nicht zur Verfügung standen, als diese Frage erstmals gestellt wurde.

1. Verwenden Sie :is() eine beliebig hohe Spezifität für Ihren Selektor festzulegen

   :is(td, #A#A#A:not(*)) {height: 200px !important}

   Der zweite Parameter der :is() legt die Spezifität des gesamten Selektors fest, aber die :not(*) Teil bedeutet, dass der Parameter niemals mit einem Element selbst übereinstimmen wird. #A#A#A ergibt eine Spezifität von (3,0,0), aber Sie können sicher einen beliebigen Selektor wählen, der ausreicht, um die andere !important-Einstellung zu überschreiben. Allerdings ist dies immer noch etwas von einem Hack.

2. Eine bessere Möglichkeit ist die Verwendung von Kaskadenebenen. Layered !important-Deklarationen überschreiben nicht-layered !important-Deklarationen, so dass Sie einfach tun können:

   @layer { 
      td {height: 200px !important} 
   }

   Durch die Verwendung von benannten Ebenen können Sie dies auf beliebige Ebenen ausdehnen.

Beachten Sie, dass Sie mit keinem der beiden Ansätze eine !important-Einstellung in einem HTML-Style-Attribut außer Kraft setzen können.

Answer 4

Ich habe einen wirklich coolen Trick gefunden mit :nicht . Wenn Ihnen nichts von dem oben Gesagten geholfen hat, dann versuchen Sie dies:

.page-width:not(.anything) {

}

Answer 5

In jedem Fall können Sie die height con max-height .