Я могу отменить!важно?

Я пытаюсь установить этот CSS на элемент 

background: red !important;

Итак, когда я попытаюсь сделать это.

 background: yellow;

(я не использую внешний css) он по-прежнему показывает только красный, а не желтый цвет для этого поля, как мне бы хотелось.

То, что я спрашиваю, это как переопределить его, возможно ли это?

3 19
html css css3 stylesheet

3 ответа:

Ans - это Да !important может быть переопределен, но вы не можете переопределить !important обычным объявлением. Она должна быть более конкретной, чем все остальные декларации.

Однако он может быть переопределен с более высокой специфичностью !important объявления.

Этот фрагмент кода в парсере Firefox объяснит , как он работает : 

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);
}

Хорошее чтение

Вот пример, чтобы показать, как переопределить 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;}

И выход будет

Введите описание изображения здесь

Также мы не можем переопределить inline !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;}

Выход равен

Введите описание изображения здесь

jsFiddle

31

Как описано в спецификации w3, !important декларации не изменяют специфику, а скорее имеют приоритет над "обычными" декларациями. Фактически, такие объявления только "конкурируют" между собой - таким образом, вы можете переопределить свое с другим !important объявлением более высокой специфичности: 

/*
 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;}

Существует также порядок объявления для рассмотрения-объявление ниже в CSS будет иметь приоритет над более ранним, если их селекторы имеют то же самое характерность.

Стоит отметить случай, когда он сталкивается со встроенным объявлением. Вопреки здравому смыслу (но полностью в соответствии со спецификацией), значение !important выйдет на первое место! Это означает, что если у вас есть 

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

Див, о котором идет речь, останется скрытым! Единственный способ, чтобы встроенное правило имело приоритет над !important, - это, ну, применить !important и к нему. Я позволю вам судить о том, насколько это хорошая практика.]}

Нет переопределения inline !important хотя...

15

!important переопределит background: yellow; попробуйте избежать использования !important. Взгляните на специфику css. http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

12