防止页面 CSS 影响 Chrome 扩展 CSS

Question

我有一个 Chrome 扩展程序，它将 DIV 注入每个页面，并使用扩展程序中包含的样式表为 DIV 设置样式。在某些页面上，注入的 DIV 看起来像预期的那样，但在其他页面上则不然。例如，在 StackOverflow 站点中，box-shadow我的元素的属性被覆盖，尽管它是! important在我的 CSS 中指定的。

当我检查有问题的元素时，Chrome 告诉我该box-shadow属性未应用（显示为删除线），但它没有告诉我原因：样式级联中没有任何内容指定该属性。

当我将box-shadow属性直接添加到元素（没有 CSS 类的好处）时，CSS 检查器视图显示属性与元素相关联，但效果仍然不存在。

更新：代码片段：

这是我在代码中指定的内容：

    var $bar = $('<div>').addClass('pp_bar').css({
        'box-shadow': '-1px 0px 2px 1px #444',
        '-moz-box-shadow': '-1px 0px 2px 1px #444',
        '-webkit-box-shadow': '-1px 0px 2px 1px #444'
    });

这是CSS：

.pp_bar {
    height: 80%;
    right: -4px;
    top: 0px;
    position: absolute;
    box-shadow: -1px 0px 2px 1px #444 ! important;
    -webkit-box-shadow: -1px 1px 2px 1px #444 ! important;
    -moz-box-shadow: -1px 1px 2px 1px #444 ! important;
}

以下是 Chrome 显示的计算样式：

-webkit-box-shadow: #444 0px 0px 1.2000000476837158px 0px;
    element.style - rgb(68, 68, 68) -1px 0px 2px 1px
    .pp_bar - rgb(68, 68, 68) -1px 1px 2px 1px user stylesheet

您可以看到使用的值 ( #444 0px 0px 1.2000000476837158px 0px) 与元素样式不同（在我的代码中分配；元素样式覆盖类值（相同）。如果没有元素样式设置，类值将被删除。

在正常运行的站点上，浏览器会以计算样式报告以下内容：

-webkit-box-shadow: #444 -1px 1px 2px 1px;
    element.style - rgb(68, 68, 68) -1px 0px 2px 1px
    .pp_bar - rgb(68, 68, 68) -1px 1px 2px 1px user stylesheet

我接下来应该尝试什么？

Answer 1

使用标志设置元素本身的样式!important。然后，您可以确定该样式正在应用于具有最高优先级的元素。

例子：

var div = document.createElement('div');
// Pick any of these (the first two lines have identical results)
div.style.setProperty('box-shadow', '0 0 3px red', 'important');
div.style.cssText += 'box-shadow: 0 0 3px red !important';

// If the HTML is generated from a string:
div.innerHTML = '<div style="box-shadow:0 0 3px!important;">...</div>';

非示例（不起作用！）：

div.style.boxShadow = '0 0 3px red !important'; // Does not work!

如果您无法设置内联样式，请尝试在 CSS 选择器中实现更高的特异性，例如通过包含 ID。