如何列出页面CSS属性选择器 排查Chrome CSS Overview未知选择器

枚举页面全量CSS选择器的可行方法 #

• 控制台执行脚本批量提取：直接在Chrome DevTools的Console面板粘贴以下代码运行，即可提取当前页面所有可访问样式表中的选择器，自动过滤非样式类规则、拆分逗号分隔的选择器组，同时单独筛出类型选择器（标签选择器）：

const allSelectors = new Set();
for (const sheet of document.styleSheets) {
  try {
    for (const rule of sheet.cssRules) {
      // 提取普通样式规则的选择器
      if (rule.selectorText) {
        rule.selectorText.split(',').forEach(sel => allSelectors.add(sel.trim()));
      }
      // 提取@media、@supports等嵌套规则内的选择器
      if (rule.cssRules?.length) {
        for (const nestedRule of rule.cssRules) {
          if (nestedRule.selectorText) {
            nestedRule.selectorText.split(',').forEach(sel => allSelectors.add(sel.trim()));
          }
        }
      }
    }
  } catch (err) {
    // 未配置CORS的跨域样式表无法被JS读取，会在此处打印对应资源地址
    console.warn('跨域样式表读取受限，资源地址：', sheet.href);
  }
}
// 筛选纯类型选择器（匹配纯标签名格式）
const typeSelectors = [...allSelectors].filter(sel => /^[a-z][a-z0-9-]*$/i.test(sel));
console.table({
  总选择器数: allSelectors.size,
  类型选择器数: typeSelectors.length,
  类型选择器列表: typeSelectors
});

如果运行后提示有跨域样式表读取受限，可以在Network面板找到对应CSS文件，本地替换引用后重新执行脚本，即可拿到全量数据。

• DevTools手动查看：打开Elements面板，在右侧Styles栏勾选设置项里的Show browser styles，即可展示所有生效样式，包括默认隐藏的用户代理样式表规则；点开每条规则右侧的来源标注，就能直接跳转到对应CSS文件的具体行。
• 样式计算溯源：打开Performance面板录制一次完整页面加载流程，点击录制结果中的Recalculate Style事件，在详情面板可以看到所有参与样式重算的选择器，以及每个选择器的匹配耗时、来源。

21个未知类型选择器的排查结论 #

• 你在自有代码、第三方依赖代码中找不到对应选择器，100%是Chrome CSS Overview默认将用户代理样式表（user agent stylesheet）的规则计入了统计。Chrome内置的UA样式表本身就包含二十个左右常用HTML标签的类型选择器，比如html、body、p、div、span、a、ul、ol、li、button、input、textarea、select、option、form、img、table、tr、td、th、h1~h6这类，数量和你遇到的21个基本吻合。
• 验证方式：打开CSS Overview的Selectors统计板块，点击类型选择器分类下的具体选择器，来源标注为user agent stylesheet的就是浏览器内置规则，不属于你项目的代码。
• 关于性能影响：UA样式的选择器是浏览器原生内置、优先级最低的规则，浏览器对这部分匹配做了专门优化，不会额外造成页面性能损耗，不需要做特殊处理。
• 你之前排查不到的核心原因是DevTools默认隐藏UA样式规则，未开启显示选项时，全局搜索代码、查看元素样式都不会展示这部分内容。

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