css 深入了解order_深入了解：CSS4文档规则

许多网站都有很多页面，但是所有这些页面通常仅用一个样式表进行样式设置。 仅提供一个样式表是一种最佳做法，可最大程度地减少HTTP请求，从而允许页面在浏览器中更快地加载。

但是，样式表中将包含一堆样式规则，对于某些页面来说是不必要的。 因此，如果我们仅对某些页面应用一组样式规则，同时又将其保留在一个样式表中，那不是很好吗？

新提出的名为@document标准CSS At-rule将使这种想法成为可能。 该规则最初是作为CSS3的一部分提出的，但是由于一些问题，该规则被推迟了，可能会包含在CSS Level 4中。

让我们看看它是如何工作的，对吧？

基本用法

@document允许我们仅为特定页面指定样式规则。 如提案中所述，它主要是为用户样式表设计的。 因此，用户可以执行以下操作来定制其（收藏夹）网站：

@document domain("facebook.com") {
	body {
		background-color: yellow;
	}
	a {
		color: red;
	}
	img {
		border-radius: 100%;
	}
}
@document domain("twitter.com") {
	body {
		background-color: red;
	}
	a {
		color: pink;
	}
}

您可以访问UserStyles.org以获得一些用户样式表的出色示例。

作为网络作者，我们还可以利用@document来控制我们网站上的样式。 假设我们希望将样式规则应用于网站上的特定页面 。 为此，我们可以使用@document封装样式规则， @document所示：

@document url("https://www.hongkiat.com/blog/about-us/") {
	h1 {
		font-size: 50em;
		color: green;
	}
	p {
		color: red;
	}
	a {
		color: blue;
	}
}

之间的区别domain()第一个示例）和url()是domain()将影响到所有被指定的域名所托管的网页，而url()将只应用样式规则到指定的URL; 其他URL（或页面）因此不受影响。

您可以使用url-prefix()将样式规则指定为以css开头的URL。

@document url-prefix("https://www.hongkiat.com/blog/category/") {
	h2 { 
		font-family: "Georgia";
	}
	div {
		background-color: blue;
		color: #fff;
	}
}

使用regexp()函数，我们可以更深入地了解正则表达式（Regex）。 以下示例是从W3C派生的，并且Regex匹配以http://www.w3.org/TR/开头的URL，后跟4个数字并以8个数字结尾。

@document regexp("http://www.w3.org/TR/\\d{4}/[^/]*-CSS2-\\d{8}/") {
	body { 
		transform: rotate(90deg);
	}
}

结论

好了，我们已经看到了@document规则的一些使用可能性。 但是如前所述，它目前对CSS4处于暂停状态，而Firefox是唯一使用@-moz-document前缀实现它的浏览器。 尽管如此，我们将@document规则的开发，并观察将来的发展情况。

翻译自: https://www.hongkiat.com/blog/css-document-rule/