如何通过JS编程检测CSS规则是否有效、被浏览器支持或被覆盖未生效？

核心思路 #

我们可以通过浏览器提供的CSSOM和计算样式API，从两个维度判断规则状态：

• 规则是否被浏览器支持：不被支持的规则不会出现在样式表的cssRules列表中，或是规则内的无效属性会被浏览器自动丢弃
• 规则是否被覆盖：对比匹配该规则选择器的元素的最终计算样式，和规则内声明的样式值是否匹配，同时校验父级规则（如@media、@supports）的生效状态

可直接使用的is_valid函数实现 #

function is_valid(rule) {
  // 仅处理普通样式规则，其他规则（如@import、@keyframes）可自行扩展逻辑
  if (rule.type !== CSSRule.STYLE_RULE) return false;

  // 校验父级规则是否生效（比如@media、@supports）
  let parent = rule.parentRule;
  while (parent) {
    if (parent.type === CSSRule.MEDIA_RULE) {
      if (!window.matchMedia(parent.conditionText).matches) {
        return false;
      }
    } else if (parent.type === CSSRule.SUPPORTS_RULE) {
      if (!CSS.supports(parent.conditionText)) {
        return false;
      }
    }
    parent = parent.parentRule;
  }

  const selector = rule.selectorText;
  // 处理伪元素选择器的情况
  const isPseudoElement = selector.match(/::(before|after|first-line|first-letter|selection)/);
  let targetElements = [];

  if (isPseudoElement) {
    const baseSelector = selector.replace(/::.*$/, '');
    targetElements = Array.from(document.querySelectorAll(baseSelector));
  } else {
    try {
      targetElements = Array.from(document.querySelectorAll(selector));
    } catch (e) {
      // 选择器语法错误，规则无效
      return false;
    }
  }

  // 没有匹配的元素，规则无生效目标
  if (targetElements.length === 0) return false;

  // 取出规则内所有手动声明的样式
  const declaredStyles = {};
  for (let i = 0; i < rule.style.length; i++) {
    const prop = rule.style[i];
    declaredStyles[prop] = rule.style.getPropertyValue(prop).trim();
  }

  // 没有声明任何有效样式，规则无效
  if (Object.keys(declaredStyles).length === 0) return false;

  // 只要有一个元素的计算样式和规则声明完全匹配，就认为规则生效
  return targetElements.some(el => {
    let computed;
    if (isPseudoElement) {
      const pseudo = selector.match(/::.*$/)[0];
      computed = getComputedStyle(el, pseudo);
    } else {
      computed = getComputedStyle(el);
    }

    return Object.entries(declaredStyles).every(([prop, ruleValue]) => {
      const computedValue = computed.getPropertyValue(prop).trim();
      return computedValue === ruleValue;
    });
  });
}

如果你只需要判断规则中任意一个属性生效就算有效，把最后判断里的every改成some即可。

效果验证 #

拿你给出的示例测试：

.mybutton#submit {
  color: red;
}
.mybutton {
  color: blue;
}

页面中存在对应元素 <button class="mybutton" id="submit"></button> 时：

var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
console.log(is_valid(rules[0])); // 输出 true
console.log(is_valid(rules[1])); // 输出 false

和预期结果完全一致。

边界情况说明 #

• 如果规则的选择器匹配不到任何元素，函数会返回false，你可以根据业务需求调整这部分逻辑
• 涉及浏览器前缀的属性，会自动匹配当前浏览器的支持情况，不需要额外处理
• 带有!important的样式也能正常识别，因为计算样式会返回最终生效的优先级最高的值

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