Переопределить встроенный CSS из файла CSS без!

Question

У меня есть угловой компонент, который генерирует встроенные атрибуты style в результирующем HTML.

Пример:

<my-component></my-component>

HTML-код этого компонента:

<div id="my_component" class="class_1" style="width: 40px; height: 40px;"></div>

Есть ли способ переопределить ширину / высоту my_component из внешнего файла CSS?Я перепробовал много селекторов, меня всегда перебивает встроенный стиль ...

! Важный работает, но я хотел бы знать, есть ли другой способ, чем использовать! Важный.

Answer 1

Если мы думаем об этом иначе, учитывая, что вы хотите переопределить ширину / высоту, тогда да, вы можете сделать это с помощью min-width / min-height:

#my_component {
  min-width:200px;
  min-height:200px;
  background:red;
}

<div id="my_component" class="class_1" style="width: 40px; height: 40px;"></div>

И чтобы быть более точным, вы можете добавить версию max- *, чтобы убедиться, что у вас фиксированная высота / ширина:

#my_component {
  min-width:200px;
  min-height:200px;
  max-width:200px;
  max-height:200px;
  background:red;
}

<div id="my_component" class="class_1" style="width: 40px; height: 40px;"></div>

Answer 2

CSS Specificity работает в иерархии

1. !important переопределяет
2. Встроенные стили
3. идентификаторы - HTML: id="blah", CSS: #blah
4. Классы - HTML: class="foo", CSS: .foo
5. Элементы и псевдоэлементы (:before, :after).

Вы можетеподробнее об этом здесь

но, как говорили другие, вкратце, нет.

Answer 3

Раньше была ошибка, когда селектор, содержащий 256, переопределял бы идентификатор .Может быть некоторый верхний предел для счетчика и переход через него, который вызовет переопределение следующего значения (селектор 256 идентификаторов переопределит встроенный стиль).

Я думаю, что ошибка 256 классов была исправлена, и яне знаю, было ли это сделано путем увеличения необходимого количества классов или создания чего-либо, чтобы предотвратить его повторение.

С чисто академической точки зрения возможно возможнопереопределить встроенный стиль без использования !important, но это было бы скорее ошибкой, чем частью спецификации / хорошей идеей.

Answer 4

Нет.

Единственный способ переопределить правило CSS без использования !important - это использовать более конкретный селектор.

Ни один селектор не является более конкретным, чем атрибут style.