@document

语法

@document url("https://www.example.com/")
{
  h1 {
    color: green;
  }
}

@document 规则可以指定一个或多个匹配函数。如果任何函数适用于给定的 URL，则该规则将对该 URL 生效。可用的函数有：

url()

匹配确切的 URL。

url-prefix()

如果文档 URL 以提供的值开头则匹配。

domain()

如果文档 URL 位于提供的域（或其子域）上则匹配。

media-document()

根据参数中的字符串匹配媒体，字符串可以是 video、image、plugin 或 all 中的一个。

regexp()

如果文档 URL 与提供的正则表达式匹配则匹配。表达式必须匹配整个 URL。

提供给 url()、url-prefix()、domain() 和 media-document() 函数的值可以可选地用单引号或双引号括起来。提供给 regexp() 函数的值必须用引号括起来。

提供给 regexp() 函数的转义值还必须从 CSS 中转义。例如，.（句点）在正则表达式中匹配任何字符。要匹配文字句点，您首先需要使用正则表达式规则对其进行转义（为 \.），然后使用 CSS 规则对该字符串进行转义（为 \\.）。

@document 目前仅在 Firefox 中受支持；如果您想在自己的非 Firefox 浏览器中复制此类功能，可以尝试使用 @An-Error94 的此 polyfill，它结合使用了用户脚本、data-* 属性和属性选择器。

正式语法

@document [ <url>                    |
            url-prefix(<string>)     |
            domain(<string>)         |
            media-document(<string>) |
            regexp(<string>)
          ]# {
  <group-rule-body>
}

示例

为 CSS 规则指定文档

@document url("http://www.w3.org/"),
          url-prefix("http://www.w3.org/Style/"),
          domain("mozilla.org"),
          media-document("video"),
          regexp("https:.*") {
  /* CSS rules here apply to:
     - The page "http://www.w3.org/"
     - Any page whose URL begins with "http://www.w3.org/Style/"
     - Any page whose URL's host is "mozilla.org"
       or ends with ".mozilla.org"
     - Any standalone video
     - Any page whose URL starts with "https:" */

  /* Make the above-mentioned pages really ugly */
  body {
    color: purple;
    background: yellow;
  }
}

规范

最初在 Level 3 中，@document 被推迟到 Level 4，但随后被移除。

浏览器兼容性

另见

• 关于 www-style 邮件列表上的每个站点的用户样式表规则。