查找不存在的样式参考

Question

是否有工具可以为我找到我在HTML中实际上不存在的所有CSS类？

即。 如果我的HTML中有<ul class =“ topnav” />，并且在任何引用的CSS文件中都不存在topnav类。

这类似于SO＃33242 ，它询问如何查找未使用的CSS样式。 这不是重复的，因为该问题询问未使用哪些CSS类。 这是相反的问题。

Answer 1

您可以将此JavaScript放在可以为您执行此任务的页面中：

function forItems(a, f) {
  for (var i = 0; i < a.length; i++) f(a.item(i))
}

function classExists(className) {
  var pattern = new RegExp('\\.' + className + '\\b'), found = false

  try {
    forItems(document.styleSheets, function(ss) {
      // decompose only screen stylesheets
      if (!ss.media.length || /\b(all|screen)\b/.test(ss.media.mediaText))
        forItems(ss.cssRules, function(r) {
          // ignore rules other than style rules
          if (r.type == CSSRule.STYLE_RULE && r.selectorText.match(pattern)) {
            found = true
            throw "found"
          }
        })
    })
  } catch(e) {}


  return found
}

Answer 2

Firefox中的错误控制台。 虽然，它会给出所有 CSS错误，所以您必须通读它。

Answer 3

IntelliJ Idea工具也可以做到这一点。

Answer 4

Firefox扩展正是您想要的功能。

它找到所有未使用的选择器。