css - style - Cómo anular! Importante?

title css style

Question

Creé 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?

Answer 1

Anulando el! Modificador importante

Simplemente agregue otra regla de CSS con !important , y otorgue al selector una especificidad más alta (agregando una etiqueta, identificación o clase adicional al selector) o agregue una regla de CSS con el mismo selector en un momento posterior al existente (en un empate, el último definido gana).

Algunos ejemplos con una 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;}

Renuncia:

¡Casi nunca es una buena idea usar !important . Esta es una mala ingeniería por los creadores de la plantilla de WordPress. En forma viral, obliga a los usuarios de la plantilla a agregar sus propios modificadores !important para anularlo, y limita las opciones para anularlo mediante JavaScript.

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

Answer 2

De acuerdo, aquí hay una lección rápida sobre Importancia de CSS. ¡Espero que lo de abajo ayude!

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

#P1 .Page {height:100px;}

es más importante que:

.Page {height:100px;}

Por lo tanto, cuando se usa algo importante, lo ideal es que solo se lo use cuando realmente se necesite. Por lo tanto, 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!!!

Answer 3

Descargo de responsabilidad: evitar! Importante a toda costa.

Este es un truco sucio y sucio, pero puede anular una importante, sin importancia, mediante el uso de una animación (infinitamente repetitiva o de larga duración) en la propiedad sobre la que intenta anular a los importadores.

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

Answer 4

Esto también puede ayudar

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

Esto anulará cualquier estilo en línea

Answer 5

La !important solo debe usarse cuando tiene selectores en su hoja de estilos con specificity contradictorias.

Pero incluso cuando tiene una especificidad contradictoria, es mejor crear un selector más específico para la excepción. En su caso, es mejor tener una class en su HTML que pueda usar para crear un selector más específico que no necesite 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 conectarse en cascada. Usar !important romperá esto.

Answer 6

Me gustaría agregar una respuesta a esto que no se haya mencionado, ya que he intentado todo lo anterior sin ningún resultado. Mi situación específica es que estoy usando semántica-ui, que tiene atributos !important incorporados en los elementos (extremadamente molestos). Intenté todo para anularlo, pero al final algo funcionó (usando jquery). Es como sigue:

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

Answer 7

Anular el uso de JavaScript

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

Trabajó para mi.

¡Aclamaciones!