@document

已弃用: 不再推荐使用该特性。虽然一些浏览器仍然支持它,但也许已从相关的 web 标准中移除,也许正准备移除或出于兼容性而保留。请尽量不要使用该特性,并更新现有的代码;参见本页面底部的兼容性表格以指导你作出决定。请注意,该特性随时可能无法正常工作。

非标准: 该特性是非标准的,请尽量不要在生产环境中使用它!

@document CSS At 规则根据文档的 URL 限制其中包含的样式规则的作用范围。它主要是为用户定义的样式表而设计的,但也可以在开发者定义的样式表上使用。

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

语法

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

url()

匹配完全相符的 URL。

url-prefix()

匹配文档的 URL 是否以参数指定的值开头。

domain()

匹配文档的域名是否为参数中指定的域名或者为它的子域名。

media-document()

根据参数中的字符串匹配媒体查询,匹配其中之一:videoimagepluginall

regexp() 已弃用 非标准

匹配文档的 URL 是否和参数中指定的正则表达式匹配,该表达式必须匹配整个 URL。

提供给 url()url-prefix()domain()media-document() 函数的参数可以不使用引号括起来。但提供给 regexp() 函数的参数必须用引号括起来。

提供给 regexp() 函数的正则表达式中的转义字符必须再次进行一次 CSS 转义。例如,一个句号(.)在正则表达式中匹配任何字符。如果想要匹配一个真正的句号,必须首先按照正则表达式的规则转义一次(变为 \.)然后再使用 CSS 规则对该字符串进行转义(转换为 \\.)。

@document 目前只在 Firefox 火狐浏览器中支持。如果你想在非 Firefox 火狐浏览器中使用此功能,你可以尝试使用由 @An-Error94 提供的 polyfill,它使用了用户脚本、data-* 属性属性选择器的组合。

备注: 这个属性还有一个带有 -moz- 的前缀版本——@-moz-document。在 Firefox 火狐浏览器 59 的 Nightly 和 Beta 版本中,此版本已被限制仅在用户和 UA 样式表中使用——这是一个旨在减轻潜在的 CSS 注入攻击的实验性特性。(请参阅 Firefox bug 1035091)。

形式语法

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

示例

指定 CSS 规则的文档

css
@document url("http://www.w3.org/"),
          url-prefix("http://www.w3.org/Style/"),
          domain("mozilla.org"),
          media-document("video"),
          regexp("https:.*") {
  /* 这里适用的 CSS 规则:
     - 页面为“http://www.w3.org/”
     - 任何 URL 以“http://www.w3.org/Style/”开头的页面
     - 任何 URL 的主机为“mozilla.org”或以“.mozilla.org”结尾的页面
     - 任何独立视频
     - 任何以“https:”开头的页面 */

  /* 让上述网页变得超级丑 */
  body {
    color: purple;
    background: yellow;
  }
}

规范

@document 在第三版中开始拟定标准,并在后来被推迟到第 4 版,但随后被移除。

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@document
DeprecatedNon-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见