/* 覆盖不支持的 CSS 属性 */ page { animation-fill-mode: forwards !important; background-attachment: scroll !important; background-origin: padding-box !important; background-clip: border-box !important; list-style-type: none !important; overflow-x: visible !important; text-indent: 0 !important; white-space: normal !important; border-left-style: solid !important; border-bottom-style: solid !important; text-align: left !important; word-break: break-all !important; font-family: -apple-system, BlinkMacSystemFont, sans-serif !important; } /* 移除不支持的伪类 */ :root { /* 移除 :root 伪类 */ } 这是原代码，{ "resource": "/E:/LIANGYE99999/styles/skyline-compat.wxss", "owner": "_generated_diagnostic_collection_name_#0", "code": "emptyRules", "severity": 4, "message": "Do not use empty rulesets", "source": "css", "startLineNumber": 19, "startColumn": 1, "endLineNumber": 19, "endColumn": 6 }这是预警信息，请你修复完成之后给我完整的代码；

<think>根据提供的预警信息，问题在于存在一个空的规则集（empty ruleset）。在代码中，我们可以看到有一个`:root`规则，里面只有注释，没有实际的样式声明，因此被ESLint（或样式检查工具）认为是空的规则集。 修复方法：删除空的规则集，或者如果确实需要保留注释，可以将注释移到规则集外部。 原始代码中： /* 移除不支持的伪类 */ :root { /* 移除 :root 伪类 */ } 这里，`:root`规则内部只有注释，没有样式声明，因此是空的。我们可以直接删除整个规则集，因为注释已经说明了原因，而且我们不需要这个空的规则。 修改后： /* 移除不支持的伪类 */ /* 注意：:root 伪类在小程序中不支持，已移除 */ 另外，我们还需要注意其他规则集是否为空。但根据提供的代码，其他规则集都有样式声明，所以只有这一个问题。 完整修复后的代码：</think>### 修复空规则集问题 根据您提供的错误信息，问题在于 `:root` 规则集是空的（只有注释），这违反了 CSS 最佳实践。以下是修复后的完整代码： ```css:skyline-compat.wxss /* 覆盖不支持的 CSS 属性 */ page { animation-fill-mode: forwards !important; background-attachment: scroll !important; background-origin: padding-box !important; background-clip: border-box !important; list-style-type: none !important; overflow-x: visible !important; text-indent: 0 !important; white-space: normal !important; border-left-style: solid !important; border-bottom-style: solid !important; text-align: left !important; word-break: break-all !important; font-family: -apple-system, BlinkMacSystemFont, sans-serif !important; } /* 移除不支持的伪类 */ /* 注意：:root 伪类在小程序中不支持，已移除 */ ``` ### 修复说明 1. **问题分析**： - 错误代码 `emptyRules` 表示存在空规则集（只有选择器没有样式声明） - 在您的代码中，`:root` 规则集只有注释没有实际样式 - 微信小程序不支持 `:root` 伪类，因此可以直接移除 2. **修复方案**： - 完全删除空的 `:root` 规则集 - 将原注释转换为单行注释，保留说明信息 - 保留所有有效的样式声明 3. **为什么这是最佳修复**： - 遵守 CSS 最佳实践：避免空规则集 - 保持代码整洁：移除无效的伪类选择器 - 保留重要信息：通过注释说明移除原因 ### 验证修复效果 1. 在微信开发者工具中： - 保存文件后观察错误是否消失 - 检查样式是否按预期应用 2. 使用 ESLint 验证： ```bash npx eslint --ext .wxss skyline-compat.wxss ``` 应该不再报告 `emptyRules` 错误 ### 小程序 CSS 兼容性最佳实践 1. **避免使用以下伪类**： ```css /* 不支持 */ :root, ::before, ::after, :hover, :active /* 替代方案 */ .custom-class { ... } ``` 2. **推荐使用的内置选择器**： ```css /* 页面根元素 */ page { ... } /* 组件选择器 */ .custom-component { ... } /* 属性选择器 */ [data-type="primary"] { ... } ``` 3. **样式继承解决方案**： 如果需要在全局覆盖样式： ```css /* 全局样式覆盖 */ page { --primary-color: #07c160; font-size: 16px; } /* 组件中使用 */ .btn { color: var(--primary-color); } ``` ###