Question

根据W3C，用户重要样式声明应该具有最高优先级，高于作者重要声明，但我没有看到这种情况发生。如果您转到jsfiddle（故意空白，我指的是网站本身），并查看iframe的样式，您会看到以下内容：

#content textarea, #content iframe
{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 0 none !important;
    box-shadow: 0 1px 3px #E4E4E4 inset;
}

我使用以下css创建了一个用户样式（使用时尚）：

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("jsfiddle.net") {
    iframe
    {
       border: 4px solid red !important;
    }
}

当我申请时，什么也没发生。如果我使用firebug来禁用规则或删除jsfiddle指定的!important，它就可以工作。如果我将用户样式中的选择器更改为#content iframe。

，它也可以

W3C明确指出：3. Sort rules with the same importance and origin by specificity of selector由于用户样式规则应该具有更高的重要性，因此特异性不应该对此有任何影响，那么为什么在仅使用iframe作为选择器时样式不适用？

（在重要的情况下使用firefox 24.2测试）

由于我没有得到答案，让我举一个我正在尝试做的实际例子，以及为什么更换选择器无济于事。 Here's a dabblet展示我正在处理的确切html / css / js。

以下用户样式正确应用红色边框，但对文本颜色没有影响。

@-moz-document domain("preview.dabblet.com"){
    #test 
    {
       color: white !important;
       border: 1px solid red;
    }
}

使用用户样式，如何强制文本始终为白色？

Answer 1

你是正确的，!important原产地声明“用户”应优先于任何原产地声明“作者”，无论其重要性或特殊性如何。但是，您假设Stylish将其样式应用于“用户”来源。

从适用于Firefox的Stylish 1.4.1开始，它将apply styles with "author" origin by default。这种变化的一个原因是与其他浏览器的Stylish兼容。他们的API只允许Stylish添加“作者”原始样式，这意味着在Firefox中工作的样式在Chrome中不起作用。你的就是这种情况的一个例子。

解决此问题的最佳方法（并确保与其他浏览器的兼容性，如果您在userstyles.org上分享您的风格），则是将选择器的特异性提高到比网站的CSS更高的特性。最简单的方法是使用与网站相同的选择器，但在开头添加body类型选择器：

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("jsfiddle.net") {
  body #content iframe {
    border: 4px solid red !important;
  }
}

在某些情况下，这是不可行的：在许多网站上影响iframe的样式，其选择器不能如此具体，或者样式试图覆盖!important声明在HTML style属性中。时尚的Firefox允许您使用特殊注释将您的样式切换为“代理”来源：/* AGENT_SHEET */。这将使你的!important击败网站可以做的任何事情（很像“用户”来源），但它不能在其他浏览器中工作，并且可能导致崩溃等坏事，所以这只是建议如果上述方法对您来说完全不可行。

Stylish's wiki上描述了所有这些以及与您的情况不太相关的一些信息。

Answer 2

你对特异性的想法是正确的。问题是你的规则和jsfiddle的规则使用!important这意味着两个规则具有相同的优先级，但#content textarea, #content iframe规则更具体。

要解决此问题，您可以将规则编写为：

#content iframe {
  border: 4px solid red !important;
}

详情请见http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#CSS_parsing

该部分将为您提供所需内容，但整篇文章非常有趣。

用户风格！重要而不是优先

2 个答案: