如何在不使用 JavaScript 重新加载页面的情况下重新加载 CSS？

在网页开发中，时常需要对网页进行样式的修改，在修改 CSS 文件后，为了使修改生效，需要重新加载 CSS 文件。通常的做法是使用 JavaScript 或者手动刷新页面，但是这样会使页面重新载入，导致用户体验变差。

下面介绍在不使用 JavaScript 重新加载页面的情况下重新加载 CSS 的方法。

方法

通过添加一个带有不同参数的 link 元素，可以重新加载 CSS 文件，而不用手动刷新页面。

1. 添加如下 HTML 代码到 head 元素中：

<link rel="stylesheet" type="text/css" href="style.css" />

2. 当 CSS 文件更新后，修改 href 的参数，使其与原本不同。

<link rel="stylesheet" type="text/css" href="style.css?v=2" />

这样就会加载一个新的 CSS 文件，而不使用 JavaScript 或者手动刷新页面。

解释

link 元素有一个 href 属性，它指定了 CSS 文件的 URL。在添加 link 元素时，指定的 CSS 文件会被下载并应用到 HTML 文档中。在修改 CSS 文件后，如果刷新网页，浏览器仍然会使用缓存的 CSS 文件，因此需要修改 href 参数，使其与原本不同，浏览器会重新下载并应用新的文件。

结论

使用添加 link 元素的方法，可以方便地重新加载 CSS 文件，而不用手动刷新页面或者使用 JavaScript。这种方法简单易行，适用于一些不需要过度定制的场景。但是如果需要更高的可定制性，还是需要使用 JavaScript。