防止页面 CSS 影响 Chrome 扩展 CSS

Question

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

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

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

已更新：代码 sn-ps：

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

    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 选择器中实现更高的specifity，例如包含一个 ID。