Могу ли я переоценить важность?

То, что я пытаюсь установить этот CSS на элемент

background: red !important;

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

 background: yellow;

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

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

Ответы

Ответ 1

Ans YES !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;}

и вывод будет

enter image description here

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

вывод

enter image description here

jsFiddle

Ответ 2

Как описано в w3 spec, объявления !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>

рассматриваемый div останется скрытым! Единственный способ иметь встроенное правило имеет приоритет над !important, то есть, применяя к нему также !important. Я позволю вам быть судьей, насколько хороша практика, которая является ಠ_ಠ

Там нет переопределения inline !important, хотя.