Question

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

当我检查相关元素时，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>';

非示例（不工作！）：</ p>

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

如果您无法设置内联样式，请尝试在CSS选择器中获得更高的specifity，例如包含ID。

防止页面CSS影响Chrome扩展程序CSS

1 个答案: