CSS中.contacts类未识别及emptyRules警告问题求助

首先，你遇到的两个问题是直接关联的：.contacts类无法被CSS识别，同时出现「Do not use empty rulesets」的提示，核心原因大概率是你的CSS中.contacts的规则集存在语法错误，或者规则集本身为空。结合你的代码场景，我帮你拆解最常见的两种情况：

1. 语法错误导致规则被忽略 #

最可能的情况是你在.main-logo的CSS规则末尾忘记添加闭合大括号}，导致后续的.contacts规则被解析成.main-logo的一部分，浏览器根本不会识别到独立的.contacts规则。举个错误示例：

.main-logo {
  /* 你的.main-logo样式代码 */
/* 这里缺少了闭合的 } */

.contacts {
  /* 你的.contacts样式代码 */
}

这种情况下，CSS解析器会把.contacts的代码当成.main-logo规则的内部内容，导致.contacts规则完全无效。同时编辑器会因为无法正确识别.contacts的规则结构，误以为它是空规则集，从而弹出黄色提示。

解决方法：仔细检查.main-logo的CSS规则，确保末尾有正确的闭合大括号}，将.contacts规则独立出来。

2. .contacts规则集确实为空 #

如果你的CSS里.contacts的规则是这样的：

.contacts {
  /* 这里没有定义任何样式属性 */
}

编辑器就会触发「empty rulesets」的提示——因为这个规则集没有任何实际样式定义，相当于无效代码。这种情况下，浏览器虽然能识别到这个类，但因为没有生效的样式，你会误以为它没被识别。

解决方法：给.contacts添加至少一条样式属性，比如：

.contacts {
  color: #2d2d2d;
  text-decoration: none;
}

额外排查点 #

• 检查类名拼写：确保HTML里的class="contacts"和CSS里的.contacts拼写完全一致（注意大小写、单复数）。
• 确认CSS文件加载：检查你的CSS文件是否已经正确引入到HTML中，没有路径错误。

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