用于检查页面上未使用的CSS类的JavaScript

// 获取页面上的所有DOM元素
var elements = document.querySelectorAll('*');

// 创建一个对象来保存已经使用的CSS类
var usedClasses = {};

// 遍历页面上的每个DOM元素
for (var i = 0; i < elements.length; i++) {
  var element = elements[i];
  
  // 获取元素的所有类
  var classes = element.classList;
  
  // 遍历元素的每个类
  for (var j = 0; j < classes.length; j++) {
    var cssClass = classes[j];
    
    // 使用样式计算来判断该类是否被应用到元素上
    var computedStyle = window.getComputedStyle(element);
    if (computedStyle && computedStyle.getPropertyValue('color') !== 'rgb(0, 0, 0)') {
      // 将已使用的类保存到usedClasses对象中
      usedClasses[cssClass] = true;
    }
  }
}

// 遍历CSS文件中定义的类，检查是否有未使用的类
var unusedClasses = [];
var cssRules = document.styleSheets[0].cssRules;
for (var k = 0; k < cssRules.length; k++) {
  var cssRule = cssRules[k];
  if (cssRule instanceof CSSStyleRule) {
    var selector = cssRule.selectorText;
    var cssClass = selector.substring(1); // 去掉选择器前面的点号（.）
    
    // 检查是否有未使用的类
    if (!usedClasses[cssClass]) {
      unusedClasses.push(cssClass);
    }
  }
}

// 输出未使用的类
console.log('Unused CSS classes: ', unusedClasses);