正则表达式适合轻量解析CSS选择器的关键成分，但无法处理嵌套、属性选择器、:not()等复杂结构；可按组合符分割后，用多步正则提取标签、ID、类名、伪类等。
正则表达式可以快速提取 CSS 选择器中的关键成分（如标签名、类名、ID、伪类等），但无法完整解析嵌套、组合或复杂优先级逻辑。适合轻量场景，比如高亮、简单匹配、预处理或教学演示。
基础结构拆分：用正则分离选择器片段
CSS 选择器常由多个“简单选择器”通过空格、>、+、~ 等连接。先按组合符切开，再逐段解析：
- 用
/[\s>+~]+/分割复合选择器（如div .btn:hover + span→["div", ".btn:hover", "span"]） - 注意：空格是后代选择符，需保留语义；建议用
/(?:\s+|\+|\>|\~)/g匹配分隔符并split同时记录分隔类型（可选） - 对每一段，再用更精细正则提取成分（见下）
单段选择器解析：标签、类、ID、伪类的正则提取
对一个简单选择器（如 input#search.btn.active:hover），可用以下正则顺序提取：
-
标签名：
^([a-zA-Z][a-zA-Z0-9\-]*)（开头字母开头的单词，非必需，可为*或省略） -
ID：
#([a-zA-Z][a-zA-Z0-9\-_]*)（匹配#id123） -
类名列表：
\.([a-zA-Z][a-zA-Z0-9\-_]*)（全局匹配所有.class，注意转义点号） -
伪类/伪元素：
:([a-zA-Z][a-zA-Z0-9\-]*)(?:\(([^)]*)\))?（支持:hover和:nth-child(2n+1)，括号内容可选捕获） - 建议按顺序执行多次
exec或用matchAll遍历，避免正则回溯冲突
注意事项与边界情况
纯正则解析有天然局限，实际使用中需主动规避或降级处理：
立即学习“前端免费学习笔记（深入）”；
- 不支持属性选择器（如
[type="text"]）、否定伪类（:not(...)内部结构）、嵌套函数（:is(.a, .b)）——这些需语法树或递归解析 - 转义字符（如
.表示字面点号）和 Unicode 标识符（.u4f60）会让正则变复杂，简易版通常忽略 - 选择器末尾空格、注释
/*...*/、IE 条件语法（html:root）等非标准内容建议先清洗再解析 - 若需计算特异性（specificity），正则提取后还需按规则计数（1个 ID=0,1,0；1个类=0,0,1；1个标签=0,0,0,1），不能仅靠字符串特征
一个可运行的简化示例（JavaScript）
以下函数返回某段选择器的结构化对象（不含组合符）：
function parseSimpleSelector(sel) {
const result = { tag: '', id: '', classes: [], pseudos: [] };
// 提取标签（可选）
const tagMatch = sel.match(/^([a-zA-Z][a-zA-Z0-9-]*|\*)/);
if (tagMatch) {
result.tag = tagMatch[1];
sel = sel.slice(tagMatch[0].length);
}
// 提取 ID
const idMatch = sel.match(/#([a-zA-Z][a-zA-Z0-9-_]*)/);
if (idMatch) {
result.id = idMatch[1];
sel = sel.replace(idMatch[0], '');
}
// 提取所有类
const classMatches = sel.matchAll(/.([a-zA-Z][a-zA-Z0-9-_]*)/g);
for (const m of classMatches) result.classes.push(m[1]);
// 提取伪类（简化版，不深入括号内）
const pseudoMatches = sel.matchAll(/:([a-zA-Z][a-zA-Z0-9-]*)(?:(([^)]*)))?/g);
for (const m of pseudoMatches) {
result.pseudos.push({ name: m[1], arg: m[2] || null });
}
return result;
}
// parseSimpleSelector('div#main.btn.active:hover') →
// { tag:'div', id:'main', classes:['btn','active'], pseudos:[{name:'hover',arg:null}] }
