CSS文件内容查询：XML的XPath/XQuery等价方案探寻

如果你需要像XPath/XQuery处理XML那样对CSS做复杂搜索，以下几种实用方案可以实现：

1. 利用CSSOM + JavaScript #

浏览器的CSS对象模型（CSSOM）会把CSS解析成可遍历的对象结构，你可以用JavaScript编写逻辑来查询符合条件的CSS规则。

比如要找出所有设置了color: red的规则：

// 遍历所有样式表
for (const sheet of document.styleSheets) {
  try {
    // 遍历样式表中的规则
    for (const rule of sheet.cssRules) {
      // 检查是否是基础样式规则
      if (rule.type === CSSRule.STYLE_RULE) {
        // 匹配color属性为red的规则
        if (rule.style.color === 'red') {
          console.log(`匹配规则：${rule.selectorText}`);
        }
      }
      // 递归处理@media等嵌套规则
      else if (rule.type === CSSRule.MEDIA_RULE) {
        for (const nestedRule of rule.cssRules) {
          if (nestedRule.type === CSSRule.STYLE_RULE && nestedRule.style.color === 'red') {
            console.log(`媒体查询内匹配规则：${nestedRule.selectorText}`);
          }
        }
      }
    }
  } catch (e) {
    // 跨域样式表会抛出权限错误，直接跳过
    continue;
  }
}

2. 使用PostCSS解析AST #

PostCSS是主流的CSS处理工具，它能把CSS转换成抽象语法树（AST），你可以通过遍历AST实现精细的查询逻辑。

比如查找所有包含transform属性的规则：

const postcss = require('postcss');

const cssContent = `
.btn {
  transform: scale(1.2);
  padding: 10px;
}

@media (min-width: 768px) {
  .card:hover {
    transform: translateY(-5px);
  }
}
`;

postcss().process(cssContent).then(result => {
  // 遍历所有规则，包括媒体查询内的嵌套规则
  result.root.walkRules(rule => {
    if (rule.nodes.some(node => node.prop === 'transform')) {
      console.log(`匹配选择器：${rule.selector}`);
    }
  });
});

PostCSS的API支持按属性值正则匹配、筛选特定媒体查询规则等，适合批量处理本地CSS文件。

3. 正则表达式（中等复杂度场景） #

如果需求不算极端复杂，正则可以快速实现搜索：

• 匹配所有包含background-image: url(的规则：

  /([^{}]+)\{[^}]*background-image:\s*url\([^)]+\)[^}]*\}/g
  

• 匹配所有.btn-开头的类选择器：

  /\.btn-[^\s{]+/g
  

注意：正则对嵌套结构（如深层@media、CSS变量）的处理能力有限，复杂场景下容易出错，适合简单到中等需求。

4. IDE/编辑器的高级搜索功能 #

主流编辑器自带针对CSS的精准搜索能力：

• VS Code开启「正则表达式」模式后，可结合CSS语法编写搜索规则；
• WebStorm内置CSS结构搜索，能直接按选择器、属性、属性值进行匹配，还支持自定义搜索模板。

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