Hoe !important overschrijven?

Ik heb een aangepast stijlblad gemaakt dat de originele CSS voor mijn WordPress-sjabloon overschrijft. Op mijn kalenderpagina heeft de originele CSS echter de hoogte van elke tabelcel ingesteld met de !important-declaratie:

td {height: 100px !important}

Kan ik dit op een of andere manier overschrijven?

Antwoord 1, autoriteit 100%

De !important modifier overschrijven

1. Voeg gewoon een andere CSS-regel toe met !importanten geef de selector een hogere specificiteit (voeg een extra tag, id of klasse toe aan de selector)
2. voeg een CSS-regel toe met dezelfde selector op een later tijdstip dan de bestaande (in een gelijkspel wint de laatst gedefinieerde).

Enkele voorbeelden met een hogere specificiteit (eerste is het hoogst/overschrijft, derde is het laagst):

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

Of voeg dezelfde selector toe na de bestaande:

td {height: 50px !important;}

Disclaimer:

Het is bijna nooit een goed idee om !importantte gebruiken. Dit is slechte techniek door de makers van de WordPress-sjabloon. Op virale wijze dwingt het gebruikers van de sjabloon om hun eigen !importantmodifiers toe te voegen om het te negeren, en het beperkt de opties om het te overschrijven via JavaScript.

Maar het is handig om hoete weten hoe je het kunt negeren, als dat soms moet.

Antwoord 2, autoriteit 8%

De !importantmag alleen worden gebruikt wanneer je hebt selectors in je stylesheet met tegenstrijdige specificiteit.

Maar zelfs als je tegenstrijdige specificiteit hebt, is het beter om een meer specifieke selector voor de uitzondering te maken. In jouw geval is het beter om een classin je HTML te hebben die je kunt gebruiken om een meer specifieke selector te maken die de !importantregel niet nodig heeft.

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

Persoonlijk gebruik ik !importantnooit in mijn stylesheets. Onthoud dat de C in CSS voor cascadering is. Het gebruik van !importantzal dit doorbreken.

Antwoord 3, autoriteit 5%

Disclaimer: Vermijd ten koste van alles !important.

Dit is een vuile, vuile hack, maar je kunt een !important overschrijven, zonder een !important, door een (oneindig herhalende of zeer langdurige) animatie te gebruiken op het terrein waarop je de belangrijke dingen probeert te negeren.

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

#P1 .Page {height:100px;}

.Page {height:100px;}

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

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

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

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