5

我有一个 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

接下来我应该尝试什么？

4

1 回答 1

0

!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。

于 2012-10-18T09:02:49.607 回答