18

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

#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有些人建议的那样，因为这些图像是动态写出的。jsFiddle 只是一个例子。更清楚地说：可以background: none使用 PURE jQuery 撤消效果，而不是编辑任何样式表。感谢您坚持这一点！

4

6 回答 6

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

是透明的。

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

是红色的。

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

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

于 2013-07-24T15:12:47.337 回答
7

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

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

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

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

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

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

不幸的是，css 没有机制来解除符合元素的规则 - 只能用“更强”规则覆盖。因此，您将无法仅通过将值设置为“继承”或“默认”之类的值来解决此任务，因为您想要查看的值既不是从父级继承也不是默认值。要解决这个问题，您有几个选择。

1）您可能已经知道要应用的值是什么。例如，您可以根据使用的选择器找出此值。所以在这种情况下，您可能知道选择器“.image-list li”需要背景图像：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; ');

PS：很抱歉回复晚了。

于 2015-11-04T02:53:29.280 回答
4

为什么它不起作用？因为背景 CSSbackground:none!important有一个#ID

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

结果在这里

于 2013-07-24T15:22:29.147 回答
2

是的，这取决于您拥有的 CSS，您只需声明具有不同背景的相同事物，就像这样

ul li {
    background: none !important;
}

ul li{
    background: blue !important;
}

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

演示

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

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

演示

您看不到任何更改，因为它没有继承任何背景，而是覆盖了background: none;

于 2013-07-24T15:14:56.323 回答
0

任何!important都可以被另一个!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
});

在这里查看结果

于 2013-07-24T15:18:55.680 回答
0

在应用了这些东西<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; }');
}

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

于 2013-07-24T16:18:06.977 回答