CSS选择器构造器 - 基于关系和属性构建

特异性使用 (a, b, c, d) 四元组表示：a 为内联样式（1或0），b 为 ID 选择器数量，c 为类选择器/属性选择器/伪类数量，d 为标签选择器/伪元素数量。通配符 * 不增加特异性。比较时从左到右，数字大的优先级高。例如：#header .nav li 的特异性为 (0,1,1,1)。

后代选择器（空格）匹配所有后代元素，无论嵌套层级多深。例如 div p 匹配 div 内所有 p 元素。子选择器（>）仅匹配直接子元素。例如 div > p 只匹配 div 的直接子 p 元素，不匹配更深层的 p。子选择器通常性能更好，因为它限制了搜索深度。

• [attr] — 仅检查属性是否存在
• [attr="value"] — 完全匹配属性值
• [attr^="prefix"] — 属性值以指定字符串开头
• [attr$="suffix"] — 属性值以指定字符串结尾
• [attr*="substring"] — 属性值包含指定字符串
• [attr~="word"] — 属性值包含完整单词（空格分隔）
• [attr|="val"] — 属性值等于或以 val- 开头（常用于语言代码）

伪类用于定义元素的特殊状态。常见分类：
动态伪类：:hover, :active, :focus, :visited
结构伪类：:first-child, :last-child, :nth-child(n), :first-of-type
表单伪类：:checked, :disabled, :enabled, :required
否定伪类：:not(selector) — 排除匹配的元素
伪元素（::before, ::after）则用于创建虚拟子元素。

浏览器从右向左匹配选择器。优化建议：
1. 避免过深的后代选择器（如 div > ul > li > a）
2. 优先使用类选择器而非标签选择器
3. 避免通配符 * 作为关键选择器
4. ID 选择器匹配最快，但应适度使用
5. 避免在 :not() 中使用复杂选择器
6. 合理使用子选择器 > 限制搜索范围