Cómo anular importante?

He creado una hoja de estilo personalizada que anula el CSS original para mi plantilla de Wordpress. Sin embargo, en mi página de calendario, el CSS original tiene la altura de cada conjunto de celdas de tabla con la !importantdeclaración:

td {height: 100px !important}

¿Hay alguna forma de anular esto?

Anular el modificador! Important

1. Simplemente agregue otra regla CSS con !important, y dele al selector una mayor especificidad (agregando una etiqueta, id o clase adicional al selector)
2. agregue una regla CSS con el mismo selector en un punto posterior que el existente (en un empate, el último definido gana).

Algunos ejemplos con una especificidad más alta (el primero es el más alto / anula, el tercero es el más bajo):

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

O agregue el mismo selector después del existente:

td {height: 50px !important;}

Descargo de responsabilidad:

Casi nunca es una buena idea usar !important. Esta es una mala ingeniería por parte de los creadores de la plantilla de WordPress. De manera viral, obliga a los usuarios de la plantilla a agregar sus propios!important modificadores para anularla, y limita las opciones para anularla a través de JavaScript.

Pero es útil saber cómo anularlo, si a veces tiene que hacerlo.

El !importantsólo se debe utilizar cuando se tiene selectores en su hoja de estilo con conflicto especificidad .

Pero incluso cuando tiene una especificidad conflictiva, es mejor crear un selector más específico para la excepción. En su caso, es mejor tener un classHTML en el que pueda usar para crear un selector más específico que no necesite la !importantregla.

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

Yo personalmente nunca uso !importanten mis hojas de estilo. Recuerde que la C en CSS es para la conexión en cascada. Usar !importantlo romperá.

Descargo de responsabilidad: evitar! Importante a toda costa.

Este es un truco sucio, sucio, pero puede anular un! Importante, sin un importante, mediante el uso de una animación (infinitamente en bucle o muy duradera) en la propiedad en la que está tratando de anular los importes importantes.

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

Bien, aquí hay una lección rápida sobre la importancia de CSS. ¡Espero que lo siguiente ayude!

En primer lugar, cada parte del nombre de los estilos como una ponderación, por lo que cuantos más elementos tenga relacionados con ese estilo, más importante será. Por ejemplo

#P1 .Page {height:100px;}

es más importante que:

.Page {height:100px;}

Entonces, cuando se usa importante, idealmente esto solo se debe usar, cuando realmente se necesita. Entonces, para anular la declinación, haga que el estilo sea más específico, pero también con una anulación. Vea abajo:

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

¡¡¡Espero que esto ayude!!!

Anular usando JavaScript

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

Trabajó para mi.

Esto también puede ayudar

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

Esto anulará cualquier estilo en línea

En cualquier caso, puede anular heightcon max-height.

Me gustaría agregar una respuesta a esto que no se ha mencionado, ya que he intentado todo lo anterior en vano. Mi situación específica es que estoy usando semántica-ui, que ha incorporado !importantatributos en elementos (extremadamente molesto). Intenté todo para anularlo, solo que al final funcionó una cosa (usando jquery). Es como sigue:

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