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

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

#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效果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

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

包含#id CSS选择器文件的值始终高于一个.class

如果你想工作，你需要在.image-list li上添加#id ，如下所示：

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

结果在这里

Answer 3

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

问题＃1 – css 特异性 （如何覆盖重要规则）。

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

问题＃2 – 背景不是单一属性 – 它是一组属性（参见规范 ）

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

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

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

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("
").find('li').css('background-image'); jQuery(".image-list li").attr('style', 'background-image: ' + backgroundImage + ' !important; '); 

PS：很抱歉回复很晚。

Answer 4

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

 ul li { background: none !important; } ul li{ background: blue !important; } 

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

演示

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

 $('head').append(''); 

演示

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

Answer 5

任何！important都可以被另一个重写！重要的是 ，普通的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 }); 

在这里查看结果

Answer 6

在

之后使用来应用!important东西，你应该能够做到这样的事情：

 var lastStylesheet = document.styleSheets[document.styleSheets.length - 1]; lastStylesheet.disabled = true; document.write(''); lastStylesheet.disabled = false; function fixBackground(el) { document.write('html #' + el.id + ' { background-image: ' + document.defaultView.getComputedStyle(el).backgroundImage + ' !important; }'); } 

这可能取决于您需要什么样的浏览器兼容性。