这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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

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

语法

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

  • url(), 匹配整个URL
  • url-prefix(), 匹配文档的URL是否以参数指定的值开头
  • domain(), 匹配文档的域名是否为参数中指定的域名或者为它的子域名
  • regexp(), 匹配文档的URL是否和参数中指定的正则表达式匹配.该表达式必须匹配整个URL.

 

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

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

例子

@document url(http://www.w3.org/),
               url-prefix(http://www.w3.org/Style/),
               domain(mozilla.org),
               regexp("https:.*")
{
  /* 该条CSS规则会应用在下面的网页:
     + URL为"http://www.w3.org/"的页面.
     + 任何URL以"http://www.w3.org/Style/"开头的网页
     + 任何主机名为"mozilla.org"或者主机名以".mozilla.org"结尾的网页     
     + 任何URL以"https:"开头的网页 */

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

规范

文档 状态 注释
CSS Conditional Rules Module Level 3
@document
Candidate Recommendation  

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 未实现 1.5 (1.8) -moz 未实现 未实现 未实现
regexp() 未实现 6.0 (6.0) 未实现 未实现 未实现
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ? ?
regexp() 未实现 未实现 ? 未实现 未实现 未实现

相关链接

文档标签和贡献者

此页面的贡献者: fsx950223, fscholz, teoli, ziyunfei
最后编辑者: fsx950223,