Demo

Question

我有一个应该有背景图片的元素，但是在我无法访问/修改的样式表中给出了以下样式：

#an-element li {
  background: none !important;
}

是否可以使用jQuery撤消该样式？我尝试用两种方式添加background: inhert!important jQuery：添加内联样式，并删除应用的样式。都没有工作。

这是一个说明问题的小提琴：http://jsfiddle.net/9bJzk/1/

更新：我有错误的小提琴链接，请再看一遍。

更新2：我无法编辑样式表。我现在更改了标题。我必须使用jQuery执行此操作，因为我无法控制CSS文件的加载顺序，但可以运行jQuery onload。

更新3：我无法使用更精确的CSS选择器（如#an-element .image-list li之类的选择器明确设置'kitten'pic（请参阅小提琴），因为有人建议这些图像是在飞行中写出来的。 jsFiddle只是一个例子。为了使它更清晰：可以使用PURE jQuery撤消background: none的效果，而不是编辑任何样式表。谢谢你坚持这个！

Answer 1

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

透明。

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

是红色的。

一个！important可以覆盖另一个！important。

如果您无法编辑CSS文件，您仍然可以在head标记中添加另一个或样式标记。

Answer 2

这个问题出现了几个问题。

问题＃1 - css Specificity（如何覆盖重要规则）。

根据规范 - 要覆盖这个选择器你的选择器应该是“更强”，这意味着它应该是！important并且至少有1个id，1个类和其他东西 - 根据你创建这个选择器是不可能的（因为你可以不改变页面内容。所以唯一可能的选择是将元素放入元素样式（可以用js完成）。注意：样式规则也应该具有！important来覆盖。

问题＃2 - 背景不是单一属性 - 它是一组属性（参见specification）

所以你真的需要知道你想要改变的属性的确切名称（在你的情况下它将是背景图像）

问题＃3 - 如何删除已应用的规则（获取以前的值）？

不幸的是，css没有机制来解除有资格获得元素的规则 - 只能覆盖“更强”的规则。因此，只需将值设置为“继承”或“默认”，您就无法解决此任务。您希望看到的原因值既不是父级也不是默认值。要解决这个问题，您有几种选择。

1）您可能已经知道要应用的值是多少。例如，您可以根据使用的选择器找出此值。所以在这种情况下你可能知道对于选择器“.image-list li”你需要background-image：url（“http://placekitten.com/150/50”）。如果是这样 - 只需要你这个脚本：

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

2）如果您不知道该值，那么您可以尝试以这种方式更改页面内容，您想要解除的规则不再符合元素，而您希望显示的规则 - 仍然符合条件。在这种情况下，您可以临时从容器元素中删除id。这是代码：

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。：很抱歉回复很晚。

Answer 3

为什么不起作用？因为background:none!important的后台CSS只有一个#ID

包含#id的CSS选择器文件的值总是高于.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;
}

result here

Answer 4

是的，这可能取决于你拥有的css，你只需要用不同的背景声明同样的东西

ul li {
    background: none !important;
}

ul li{
    background: blue !important;
}

但是你必须确保声明是在第一个看到级联之后发生的。

Demo

您也可以像这样在中创建样式标记

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

Demo

您看不到任何更改，因为它不会继承任何背景但会覆盖background: none;

Answer 5

任何！important 都可以被其他！important 覆盖，正常CSS precedence rules仍然适用。

示例：

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

查看结果here

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

这可能取决于您需要哪种浏览器兼容性。

是否可以使用jQuery覆盖/删除background：none！important？

6 个答案:

Demo

Demo