Ответ 1

div { background: none !important }
div { background: red; }

Является прозрачным.

div { background: none !important }
div { background: red !important; }

Красный.

Важно! Можете переопределить другое! Важно.

Если вы не можете редактировать файл CSS, вы можете добавить еще один или тег стиля в теге head.

Ответ 2

Почему это не работает? Поскольку для фона CSS с background:none!important есть один #ID

Файл селектора CSS, содержащий #ID, всегда будет иметь более высокое значение, чем один .class

Если вы хотите работать, вам нужно добавить #ID в свой .image-list li следующим образом:

#an-element .image-list li {
    display: inline-block;
    background-image: url("http://placekitten.com/150/50")!important;
    padding: 1em;
    border: 1px solid blue;
}

результат здесь

Ответ 3

В этом вопросе возникает несколько проблем.

Проблема №1 - css Specificity (как переопределить важное правило).

В соответствии со спецификацией - для переопределения этого селектора ваш селектор должен быть "более сильным", что означает, что он должен быть важным и иметь как минимум 1 id, 1 класс и что-то еще - в соответствии с вашим созданием этот селектор невозможен (как вы можете 't изменить содержимое страницы). Таким образом, единственный возможный вариант - положить что-то в стили стилей, который (можно сделать с помощью js). Примечание: правило стиля должно также иметь важное значение для переопределения.

Проблема №2 - фон не является единственным свойством - это набор свойств (см. спецификация)

Итак, вам действительно нужно знать, какие именно имена свойств вы хотите изменить (в вашем случае это будет фоновое изображение)

Проблема № 3 - Как удалить правило, уже примененное (для получения предыдущего значения)?

К сожалению, у css нет механизма для отклонения правила, которое квалифицируется для элемента - только для переопределения с "более сильным" правилом. Таким образом, вы не сможете решить эту задачу, просто установив значение в нечто вроде "inherit" или "default", значение причины, которое вы хотите увидеть, не наследуется от родителя и не по умолчанию. Для решения этой проблемы у вас есть несколько вариантов.

1) Возможно, вы уже знаете, какое значение вы хотите применить. Например, вы можете узнать это значение на основе используемого селектора. Поэтому в этом случае вы можете знать, что для селектора ".image-list li" вам нужен background-image: url ( " http://placekitten.com/150/50" ), Если так - просто вы это script:

jQuery(".image-list li").attr('style', 'background-image: url("http://placekitten.com/150/50") !important; ');

2) Если вы не знаете значения, вы можете попытаться изменить содержимое страницы таким образом, что правило, которое вы хотите отклонить, больше не подходит для элемента, тогда как правило, которое вы хотите показать, по-прежнему квалифицируется. В этом случае вы можете временно удалить идентификатор из элемента контейнера. Вот код:

jQuery("#an-element").attr('id', '');
var backgroundImage = jQuery(".image-list li").css('background-image');
jQuery("#an-element").attr('id', 'an-element');
jQuery(".image-list li").attr('style', 'background-image: ' + backgroundImage + ' !important; ');

Вот ссылка на скрипку http://jsfiddle.net/o3jn9mzo/

3) В качестве третьего решения вы можете сгенерировать элемент, который будет иметь право на нужный выбор, чтобы узнать значение свойства - что-то вроде этого:

var backgroundImage = jQuery("<div class='image-list'><li></li></div>").find('li').css('background-image');
jQuery(".image-list li").attr('style', 'background-image: ' + backgroundImage + ' !important; ');

P.S.: Извините за очень поздний ответ.

Ответ 4

Да, это возможно в зависимости от того, что у вас есть, просто просто объявляйте одно и то же с другим фоном, подобным этому

ul li {
    background: none !important;
}

ul li{
    background: blue !important;
}

Но вы должны убедиться, что объявление появилось после того, как первое увидело его как каскадное.

Демо

Вы также можете создать тег стиля в jQuery, подобный этому

$('head').append('<style> #an-element li { background: inherit !important;} </style>');

Демо

Вы не видите никаких изменений, потому что не наследует какой-либо фон, но перезаписывает background: none;

Ответ 5

Любой ! важный может быть переопределен другим ! важным, нормальным правилами приоритета CSS все еще применяются.

Пример:

#an-element{
    background: #F00 !important;
}
#an-element{
    background: #0F0 !important; //Makes #an-element green
}

Затем вы можете добавить атрибут стиля (используя JavaScript/jQuery), чтобы переопределить CSS

$(function () {  
    $("#an-element").attr('style', 'background: #00F !important;');
    //Makes #an-element blue
});

Посмотрите результат здесь

Ответ 6

С <script> сразу после <style>, который применяет вещи !important, вы должны сделать что-то вроде этого:

var lastStylesheet = document.styleSheets[document.styleSheets.length - 1];
lastStylesheet.disabled = true;

document.write('<style type="text/css">');
// Call fixBackground for each element that needs fixing
document.write('</style>');

lastStylesheet.disabled = false;

function fixBackground(el) {
    document.write('html #' + el.id + ' { background-image: ' +
        document.defaultView.getComputedStyle(el).backgroundImage +
        ' !important; }');
}

Это, вероятно, зависит от того, какая именно совместимость с браузером вам нужна.