覆盖内联 css !important答案

【问题标题】：override inline css !important覆盖内联 css !important
【发布时间】：2018-06-16 13:56:05
【问题描述】：

如何使用 javascript 或 CSS 覆盖样式“颜色：红色”？我想让它变成“2px”而不是“1px”边框。

<div style="border: 1px solid #ccccc !important"> 
       Lorem... 
</div>

我不能在“div”中添加一个类、id。这不是一个解决方案。我必须以某种方式覆盖上面的代码。

解决方案 已在网站上加载使用过的 jquery。冉： $( 文档 ).ready(function() { $('table[style*=border]').css('border-width',"4px"); }); https://jsfiddle.net/78oxmgLj/10/

【问题讨论】：

"我如何覆盖样式 "color: red"" 您的问题中没有 color: red 样式。另外：为什么不能去掉内联样式？
为什么我不能删除内联样式：我通过 chrome 浏览器插件将 css 和 js 注入网站以自定义网站。如果有意义的话，在主题之上制作一个主题..只是在玩。（=

标签： javascript css overriding

【解决方案1】：

使用您的实际代码，您无法使用 CSS（正如 @TJ Crowder 评论的那样，没有 CSS 规则可以击败与 !important 内联），但这里有一个 JS 解决方案：

document.querySelector('.box').style.borderWidth="2px";
document.querySelector('.box').style.borderColor="red";

//or
//document.querySelector('.box').style.border="2px solid red";

<div class="box" style="border: 1px solid #cccccc!important">
  Lorem...
</div>

更新

如果由于某种原因您无法添加类，您可以使用基于样式的attribute selector（但我不建议将其用作通用解决方案）

document.querySelector('div[style*=border]').style.borderWidth="2px";
document.querySelector('div[style*=border]').style.borderColor="red";

<div style="border: 1px solid #cccccc!important">
  Lorem...
</div>

【讨论】：

为什么会被否决？这两点都是正确的：!important 内联规则优于样式表应用的 any 规则，但可以通过代码进行修改。
我无法添加课程。 ps - 你的帖子不应该被否决）=
@1xxooxx 我添加了另一种方式，但我不建议经常使用它:) 但它适用于你的情况
@1xxooxx：会有一些的方式可以选择元素，不一定是类；查看CSS selector spec（因为querySelector 使用CSS 选择器）。
由于某种原因仍然无法正常工作。我正在使用 JS。下面的代码是否正确？ var _min = [{}]; document.querySelector('table[style*=border]').style.borderWidth="0px 0px 0px 0px";

【解决方案2】：

虽然公认的答案是正确的，但根据您的用例，您可以在此处仅使用 CSS 执行一些方法。即使您无法覆盖特定值，您也可以使用不同的属性来更改原始状态。

b {
  filter: hue-rotate(250deg); /*blue*/
}

i {
  display: inline-block;
  transform: scale(0.4);
}

<b style="color: red !important">Stack</b>
<i style="font-size: 50px !important">Stack</i>

在您的示例中，如果您需要将 1px 重要的内嵌边框更改为 2px，您可以使用轮廓或框阴影而不模糊：

div:first-child {
  box-shadow: 0 0 0 3px #ccc;
}

<div style="border: 1px solid #cccccc !important"> 
       Lorem... 
</div>
<br>
<div style="border: 4px solid #cccccc !important"> 
       Lorem... 
</div>

【讨论】：

我不建议使用非标准标签。您违反了正常的浏览器规则，并且不强制浏览器以某种方式工作。此外，这可能会影响您的 SEO。
不过，我认为你的第二个例子很好。