html - ¿Puedo anular! ¡Importante?

css css3

Question

Lo que estoy intentando es configurar este CSS en el elemento

background: red !important;   

así que cuando trato de hacer esto.

 background: yellow;  

(No estoy usando un css externo) todavía muestra solo el rojo y no el amarillo para ese campo, como me gustaría.

Lo que estoy preguntando es cómo anularlo, ¿es posible?

Answer 1

Ans is YES !important se puede anular, pero no se puede anular !important mediante una declaración normal. Tiene que ser una especificidad más alta que todas las demás declaraciones.

Sin embargo, se puede anular con una especificidad más alta !important Declaración !important .

Este fragmento de código en el analizador de Firefox explicará cómo funciona :

if (HasImportantBit(aPropID)) {
  // When parsing a declaration block, an !important declaration
  // is not overwritten by an ordinary declaration of the same
  // property later in the block.  However, CSSOM manipulations
  // come through here too, and in that case we do want to
  // overwrite the property.
  if (!aOverrideImportant) {
    aFromBlock.ClearLonghandProperty(aPropID);
    return PR_FALSE;
  }
  changed = PR_TRUE;
  ClearImportantBit(aPropID);
}

Buena lectura

• Específicos sobre la especificidad de CSS
• Especificidad CSS: Cosas que debes saber

Aquí hay un ejemplo para mostrar cómo anular CSS

HTML

<div id="hola" class="hola"></div>

CSS

div { height: 100px; width: 100px; }
div { background-color: green !important; }
.hola{    background-color:red !important; }
#hola{    background-color:pink !important;}

y la salida será

Además, no podemos anular en línea !important

HTML

<div id="demo" class="demo" style="background-color:yellow !important;"></div>

CSS

div { height: 100px; width: 100px; }
div { background-color: green !important; }
.demo{    background-color:red !important; }
#demo{    background-color:pink !important;}

la salida es

Answer 2

Como se describe en la especificación w3 , !important declaraciones !important no alteran la especificidad, sino que prevalecen sobre las declaraciones "normales". Efectivamente, tales declaraciones solo "compiten" entre ellas, por lo tanto, puedes anular las tuyas con otra declaración !important de mayor especificidad:

/*
 these below are all higher-specificity selectors and, if both 
 rules are applicable to the same element, background colour
 will be set to "yellow":
 */
.some-class.some-other-class, div.some-class, #some-id {background: yellow !important;}
.some-class {background: red !important;}

También está el orden de declaración a considerar: una declaración más abajo en el CSS tendrá prioridad sobre una anterior si sus selectores tienen la misma especificidad.

Un caso que vale la pena observar es cuando choca con una declaración en línea. ¡Contraintuitivamente (pero totalmente en línea con la especificación), el valor !important saldrá a la cabeza! Esto significa que si tienes

<style>
  #secret-container {display:none !important;}
</style>
<script>
  $(''#secret-container'').show();//using jQuery etc.
</script>
<div id="secret-container">...</div>

El div en cuestión permanecerá oculto! La única forma de que una regla en línea tenga prioridad sobre una !important es, también, aplicando !important para ella. Te dejaré ser el juez de cuán buena es la práctica ಠ_ಠ

Sin embargo, no hay anulación en línea !important .

Answer 3

!important anulará el background: yellow; Trate de evitar el uso de !important . Echa un vistazo a la especificidad css. http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/