如何使用CSSParser获取@media规则内的选择器及样式内容？

AI 小北

2026-5-27

解决CSSParser获取@media内部样式内容的问题

嘿，我之前用CSSParser处理媒体查询规则的时候也碰到过一模一样的情况！你现在拿到的screen and (color)只是媒体查询的条件部分，而你要的内部样式内容其实藏在CSSMediaRuleImpl的cssRules集合里。

问题原因

CSSMediaRule本身包含两部分：

媒体查询条件：通过getMedia()获取（就是你现在拿到的内容）
内部样式规则集合：需要通过getCssRules()来访问

解决代码示例

你只需要在现有代码基础上，加上对内部规则的获取和拼接：

final String css = "@media screen and (color) { h1 { color: red } }";
final CSSStyleSheet sheet = parse(css);
final CSSRule cssRule = sheet.getCssRules().item(0);

if (cssRule instanceof CSSMediaRuleImpl) {
    CSSMediaRuleImpl mediaRule = (CSSMediaRuleImpl) cssRule;
    
    // 这是你已经获取的媒体查询条件
    MediaList mediaList = mediaRule.getMedia();
    
    // 获取媒体查询内部的所有样式规则
    CSSRuleList innerRules = mediaRule.getCssRules();
    
    // 拼接成你需要的 { h1 { color: red } } 格式
    StringBuilder targetContent = new StringBuilder("{ ");
    for (int i = 0; i < innerRules.getLength(); i++) {
        CSSRule innerRule = innerRules.item(i);
        targetContent.append(innerRule.getCssText()).append(" ");
    }
    targetContent.append("}");
    
    // 输出结果就是你要的部分
    System.out.println(targetContent.toString());
}