selectortext 是 cssrule 接口的只读属性，仅对 cssstylerule 有效，返回标准化后的选择器字符串；访问前须校验 rule instanceof cssstylerule 并用 try/catch 防异常，且其值可能被浏览器小写化、空格规范化或引号移除，不可靠作逻辑依据。
selectorText 是什么，它能拿到哪些选择器
selectorText 是 CSSRule 接口的一个只读属性，用于返回该样式规则的原始选择器字符串。它只对 CSSStyleRule（即普通 CSS 规则，如 .btn { color: red; }）有效；对 CSSImportRule、CSSMediaRule、CSSFontFaceRule 等其他子类型返回 null 或抛出异常（取决于浏览器）。注意：它返回的是解析后的字符串，不是源码中的原始写法——比如自动标准化空格、去掉注释、合并重复选择器等行为由浏览器决定。
如何安全读取 selectorText 而不报错
直接访问 rule.selectorText 很容易触发 DOMException: Failed to read the 'selectorText' property，尤其在跨域样式表、内联 @import、或某些动态注入的规则中。必须先判断规则类型和可读性：
- 用
rule instanceof CSSStyleRule或rule.type === CSSRule.STYLE_RULE做类型守卫 - 对
document.styleSheets中的每个sheet，需检查sheet.cssRules是否存在且可访问（跨域 sheet 会是null或仅含 0 条规则） - 部分浏览器（如旧版 Safari）对
selectorText的访问会抛出SecurityError，建议用try/catch包裹
示例片段：
for (const sheet of document.styleSheets) {
try {
const rules = sheet.cssRules;
if (!rules) continue;
for (const rule of rules) {
if (rule instanceof CSSStyleRule) {
console.log(rule.selectorText); // ✅ 安全访问
}
}
} catch (e) {
// 跨域或权限拒绝，跳过
}
}
selectorText 返回值的常见“失真”现象
selectorText 不保证与源码一致，实际使用中要注意这些表现：
- 浏览器可能自动小写化选择器（如
Div#Header→div#header） - 多个逗号分隔的选择器会被保留原样，但空格可能被规范化（
h1 , p→h1, p） - 属性选择器中的引号可能被移除或统一（
[data-id="123"]→[data-id=123]） - 伪类/伪元素的冒号数量可能被标准化（
div::before和div:before都可能返回div::before） - 某些 CSS-in-JS 库生成的规则（如 Emotion）可能返回带哈希的类名（
.css-1a2b3c），但无法还原原始语义名
替代方案：当 selectorText 不可用或不可靠时
如果目标是反向映射样式到 DOM 元素，或需要语义化选择器，selectorText 往往不够用。更务实的做法包括：
- 用
getComputedStyle(el)+ 手动比对规则（适合单个元素调试） - 通过
document.querySelectorAll(rule.selectorText)验证是否命中预期元素（验证而非获取） - 在构建阶段注入 sourcemap 或 data 属性（如
<style data-origin="Button.module.css"></style>），绕过运行时解析 - 避免依赖
selectorText做逻辑分支——它本质是调试/可观测性字段，不是契约接口
真正稳定可靠的样式溯源，往往得从构建流程或开发者工具入手，而不是寄希望于运行时规则对象的字符串字段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
