Cómo reemplazar!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 celda de la tabla establecida con la declaración !important: 

td {height: 100px !important}

¿Hay alguna manera de que pueda anular esto?

 177
css
Author: Patrick Hofman, 2012-06-24
Source

7 answers

Anulando el !modificador importante

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

Algunos ejemplos con mayor especificidad: 

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:

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

Pero, es útil saber cómo reemplazarlo, si a veces es necesario.

 269
Author: Matt Coughlin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-18 19:03:48

El !important solo debe usarse cuando tiene selectores en su hoja de estilos con especificidad en conflicto.

Pero incluso cuando tiene especificidad conflictiva, es mejor crear un selector más específico para la excepción. En su caso, es mejor tener un class en su HTML que puede usar para crear un selector más específico que no necesita la regla !important.

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

Personalmente nunca uso !important en mis hojas de estilo. Recuerde que la C en CSS es para la cascada. Usando !important romperá esto.

 26
Author: Jasper de Vries,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-31 11:39:08

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

En primer lugar, cada parte de los estilos se nombra como una ponderación, por lo que cuantos más elementos tenga que se relacionen con ese estilo, más importante es. Por ejemplo

#P1 .Page {height:100px;}

Es más importante que:

.Page {height:100px;}

Así que cuando se utiliza importante, idealmente esto solo debe ser utilizado, cuando realmente realmente necesario. Así que para sobrepasar la decleración, haga el estilo más específico, pero también con una anulación. Ver abajo: 

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

Espero que esto ayude!!!

 10
Author: KM123,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-18 19:12:44

Sobreescribir usando JavaScript

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

Funcionó para mí.

Salud!

 6
Author: Manish Shrivastava,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-09 11:01:42

Esto también puede ayudar

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

Esto anulará cualquier estilo inline

 5
Author: DiChrist,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-12 13:06:40

Descargo de responsabilidad: ¡Evita !importante a toda costa.

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

@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>
 4
Author: mariomc,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-14 00:47:26

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 semantic-ui, que ha construido atributos !important 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');
 -5
Author: IWI,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-26 13:25:31