Важнее, чем! Важно (более высокий уровень! Важно)?

Название говорит о многом. Есть ли ключевое слово CSS, которое переопределяет !important на одном более высоком уровне или есть какая-то функция, подобная этой, запланированная в любой новой спецификации CSS?

Конечно, я знаю, что !important маловероятно, что он будет использоваться noobs, и что во многих случаях это не лучший способ, так как таблицы стилей могут действительно плохо работать, если они плохо написаны. Однако иногда это полезно и даже необходимо.

Самый сильный стиль в CSS, который я могу себе представить, это встроенный стиль с !important как это:

<span id="bluebeaver" style="color: red !important;">I am a happy blue beaver</span>

Теперь давайте предположим, что я не могу редактировать HTML и должен изменить стиль из внешней таблицы стилей.

Было бы здорово иметь что-то вроде:

#bluebeaver {
    color: blue !important 2;
}

Если у них есть уровни для этого, как, например, с z-index,

Есть ли какое-либо решение для этого или что-то запланированное с более новыми спецификациями CSS? Пока ничего не нашел.

Можете ли вы показать решение CSS, чтобы переопределить !important встроенный стиль или определенно нет возможности?

Источник

7 ответов

Решение

Нет, нет ключевого слова или другого способа сделать объявление более важным, чем !important, Нет известных действий, чтобы изменить это.

В общем, можно переопределить объявление, которое имеет !important используя правило, которое также имеет и имеет более высокую специфичность. Тем не менее, декларация в style Атрибут по определению обладает более высокой специфичностью, чем любое другое авторское объявление. Единственный способ победить это в CSS - это использовать таблицу стилей пользователя с !important,

Существуют решения не-CSS, но они довольно очевидны, например, использование JavaScript для простого удаления или изменения style приписывать.

Источник

Просто удалите style атрибут из элемента с использованием JavaScript:

document.getElementById("bluebeaver").removeAttribute('style');

Затем используйте свою внешнюю таблицу стилей, чтобы применить любой CSS, который вы хотите.

Две причины, почему создание более высоких уровней !important не очень хорошая идея

  1. Это создает плохой прецедент.

    Добавление !important2 будет уступать привычкам плохого кодирования в глобальном масштабе. Это был бы W3C, посылающий сигнал, что все идет.

    Вы также открыли дверь !important3, !important4 и т. д. Где это заканчивается?

    Снижение стандартов и ожиданий не является хорошим способом достижения прогресса в отрасли.

  2. Это может даже не решить вашу проблему.

    Учтите это: человек, который установил этот стиль color: red !important Очевидно, хотел, чтобы это правило имело наивысший приоритет.

    Если ваша идея стала реальностью, и были более высокие уровни !important скажем, подойдя к !important10 Угадай, что бы использовал этот человек? И у вас все еще будет та же проблема, но вы будете здесь спрашивать, есть ли планы на !important11,

Источник

Самый высокий порядок, о котором я знаю, это нацеливание на элементы, к которым применены встроенные стили Вы можете выбрать элемент style Атрибут data в селекторе CSS переопределяет его стиль! Проверь это:

.blue[style]{
  color:blue !important;
}
<div class="blue" style="color:red;">SO VERY IMPORTANT</div>

Конечно, вы даже можете получить более конкретную информацию, ориентируясь на стиль, например: .blue[style="color:red;"],

Источник 
      div.prop1.imp1.imp2 {
  background-color: red !important;
}

div.prop1 {
  background-color: black;
}

div.prop1.imp1 {
  background-color: white !important;
}

Если вы не можете этого сделать, поскольку не все элементы имеют класс .imp1 в списке в JavaScript, и вы добавляете, скажем, выделение чего-то одним нажатием кнопки (.imp2) . Вы можете указать «более важный» класс .imp2 над другими с помощью !important.

Это делает свойство с дополнительным классом imp2 более важным, чем стиль .prop1.imp1, потому что оно загружается первым в css.

Источник

Вы можете изменить цвет элемента HTML, используя JavaScript.

document.getElementById('bluebeaver').style.color=blue;

Демо: https://jsfiddle.net/041fhz07/

Источник

Если вы хотите использовать только CSS, просто объявите новый стиль с помощью !important, последний "важный" выигрывает. хотя я бы избегал использовать его в первую очередь, если в этом нет полной необходимости.

он должен использоваться только для стилей, которые необходимы для работы вашей страницы / приложения, а не для вещей, которые должны измениться.

Другое решение - использовать JS для удаления и / или добавления классов / идентификаторов, чтобы изменить стиль элемента, когда вы не хотите изменять сам CSS.

Источник

Попробуйте специфичность: если два селектора применяются к одному и тому же элементу, выигрывает тот, у которого более высокая специфичность.

Попробуйте придать стилю свой элемент как можно более конкретному. Может быть, использовать:

 #bluebeaver span {}

Посмотрите на эту ссылку: Специфика CSS: Вещи, которые вы должны знать

Источник
Другие вопросы по тегам