是否可以覆盖/删除背景：无！对jQuery重要吗？

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

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

可以用jQuery撤消该样式吗？我尝试添加

背景：inhert！重要信息

使用jQuery有两种方法：添加内联样式和删除应用的样式。两者都不起作用

这里有一把小提琴说明了这个问题：

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

---

更新2：我无法编辑样式表。我把标题改得更清楚了。我必须使用jQuery来完成这项工作，因为我无法控制CSS文件的加载顺序，但可以运行jQuery onload

更新3：我无法使用更精确的CSS选择器（如选择器，如

#元素）来明确设置“kitten”图片（见小提琴）。图像列表li

，正如一些人建议的那样，因为这些图像正在被动态写入。jsFiddle只是一个例子。更清楚的是：

background:none

的效果可以用纯jQuery撤销，而不需要编辑任何样式表。谢谢你坚持这个

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

它是透明的

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

它是红色的

安！重要的是你可以超越另一个！重要的

---

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

是的，这可能取决于您使用的CSS，您只需在不同的背景下声明相同的内容，如下所示

ul li {
    background: none !important;
}

ul li{
    background: blue !important;
}

但是你必须确保声明在第一个声明之后，因为它是级联的

您还可以像这样在jQuery中创建一个样式标记

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

$（'head'）.append（'a element li{background:inherit！important；}'）；

---

您无法看到任何更改，因为它没有继承任何背景，但正在覆盖

background:none任何！重要信息可以被另一个覆盖！重要信息，正常值仍然适用

例如：

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

查看结果
为什么不起作用？
因为背景CSS带有
background:none！重要信息
有一个
#ID

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

如果您想工作，您需要在
图像列表li
上添加
id
，如下所示：

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

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

#元素。图像列表li{
显示：内联块；
背景图像：url（“http://placekitten.com/150/50"重要,；
填充：1em；
边框：1px纯蓝色；
}

在应用
的
后面加一个
！重要事项
您应该能够执行以下操作：

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

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

var lastStylesheet=document.styleSheets[document.styleSheets.length-1]；
lastStylesheet.disabled=true；
文件。写（“”）；
//为每个需要修复的元素调用fixBackground
文件。写（“”）；
lastStylesheet.disabled=false；
功能背景（el）{
document.write（'html#'+el.id+'{背景图像：'+
document.defaultView.getComputedStyle（el）.backgroundImage+
“！重要；}”）；
}

不过，这可能取决于您需要哪种浏览器兼容性。
在这个问题上会出现一些问题

问题#1-css（如何覆盖重要规则）

根据规范-要覆盖此选择器，您的选择器应“更强”，这意味着它应该更强大！重要信息，并且至少有1个id、1个类和其他内容-根据您的要求，创建此选择器是不可能的（因为您无法更改页面内容）。因此，唯一可能的选择是将某些内容放入元素样式中（可以使用js完成）。注意：样式规则也应该有！重要的是要覆盖

问题#2-背景不是单个属性-它是一组属性（请参阅）

因此，您确实需要知道要更改的属性的确切名称（在您的情况下，它将是背景图像）

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

不幸的是，css并没有任何机制来消除符合元素条件的规则——只是用“更强大”的规则覆盖。因此，仅将值设置为“继承”或“默认值”无法解决此任务，因为您希望看到的值既不是从父级继承的值，也不是默认值。要解决这个问题，你有两个选择

1） 您可能已经知道要应用的值。例如，您可以根据所使用的选择器找到该值。所以在本例中，您可能知道对于选择器“.image list li”，您需要背景图像：url（“”）。如果是，请仅使用此脚本：

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

这里是小提琴的链接

3） 作为第三种解决方案，您可以生成符合所需选择的元素，以查找属性值，如下所示：

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

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

var backgroundImage=jQuery（
）.find（'li'）.css（'background-image'）；
jQuery（“.image list li”）.attr（'style'，'backgroundImage:'+backgroundImage+'！important；'）；

注意：很抱歉回复太晚。
您的JSFIDLE中没有CSS，您可以添加它吗？希望您尝试了
inhert
而不是
inhert
？您的JSFIDLE只是html，除了一个简单的列表
background:inherit
没有任何意义，
background
不是一个继承属性之外，它没有说明任何东西。“你的意思是，如果这条规则不到位，你想把它设置为正常情况吗？”皮特道歉，我说