如何基于URL设置不同背景色？CSS实现多环境标识需求

完全可以通过CSS条件规则实现这个需求，核心是利用@document规则（属于CSS Conditional Rules模块）匹配不同主机名，从而为不同环境应用差异化的背景色样式，无需依赖JS或动态生成CSS文件。

实现代码示例 #

/* 本地开发环境（localhost/127.0.0.1） */
@document domain("localhost"), url-prefix("http://127.0.0.1"), url-prefix("https://127.0.0.1") {
  :root {
    background-color: #e8f4f8; /* 浅蓝色标识本地环境 */
  }
}

/* 测试环境（假设域名为 test.your-app.com） */
@document domain("test.your-app.com") {
  :root {
    background-color: #f8e8e8; /* 浅红色标识测试环境 */
  }
}

/* 生产环境（默认样式，或明确匹配生产域名） */
:root {
  background-color: #ffffff; /* 白色作为生产环境默认背景 */
}

@document domain("your-app.com") {
  :root {
    background-color: #ffffff;
  }
}

规则说明 #

• @document domain("xxx")：精确匹配指定域名下的所有页面
• @document url-prefix("xxx")：匹配以指定URL前缀开头的页面，适合IP地址或带非标准端口的场景
• 样式优先级：匹配到的@document规则会覆盖默认的:root样式，确保环境标识生效

兼容性提示 #

• Firefox原生支持@document规则，无需额外配置
• Chromium系浏览器（Chrome、Edge等）需要在浏览器设置中开启Experimental Web Platform features flag（路径：chrome://flags或edge://flags）才能启用@document规则
• 如果需要无flag的兼容方案，可结合1行内联JS设置自定义CSS属性，但这会打破纯CSS的限制；若严格要求纯CSS，上述方案完全符合需求

内容的提问来源于stack exchange，提问作者queeg