如何覆盖！重要的内联 CSS？答案

【问题标题】：How can I override !important inline css?如何覆盖！重要的内联 CSS？
【发布时间】：2017-03-11 15:31:52
【问题描述】：

我正在编辑一个页面，我不能更改 html，只能更改 css，但我需要更改一个使用 !important 声明为内联的背景图像。我已经尝试声明 background-image: none !important;或更改 bg 位置直到它消失，然后在 :before 伪元素上声明新的 bg 图像，但它不起作用。有没有办法在不改变html的情况下做到这一点？代码如下：

<ul class="list-inline">
    <li>
       <a href="http://www.facebook.com/portoseguro" target="_blank">
         <span class="gIconSocial fb" style="background: url('https://cliente.portoseguro.com.br/static-files/Institucional/Icones/facebook_off.png') no-repeat !important;">Facebook</span>
        </a>
    </li>
</ul>

（我也不会用javascript，只能用css）

【问题讨论】：

How to override !important?的可能重复
它不是重复的，您可以通过在其后添加另一个来覆盖 css 文件中的 !important，但这是内联 css。我认为这是做不到的。如果可以添加 css 为什么不能添加 javascript？
如果你有 JavaScript，你可以用它来改变它，否则你就不走运了。 Hackerman 的建议是不正确的，它是关于覆盖 CSS 文件中的规则，这可以通过添加具有更高特异性的规则来完成，但对于内联样式，则无法做到。这可能就是他们这样添加它的原因：确保没有人对它发脾气。
链接：-css-tricks.com/override-inline-styles-with-css

标签： html css

【解决方案1】：

浏览器优先考虑内联样式。而且，由于这是 !important 属性，如果您只想使用 CSS 执行此操作，则必须编辑 HTML 以消除此问题。

我建议您阅读更多关于 Specificity 应用样式

【讨论】：

【解决方案2】：

您可以通过添加CSS background-size: 0; 来隐藏背景图片并尝试将背景图片放入ul.list-inline > li > a[target=_blank]

编辑：

宁可使用ul.list-inline > li > a[target]，否则它不起作用

【讨论】：