UD5工具箱
CSS选择器主要有哪些类型？
CSS选择器主要分为以下几大类型：基础选择器包括元素选择器（如「div」、「p」，匹配所有指定标签名的元素）、类选择器（如「.container」，匹配所有class属性包含该类名的元素）、ID选择器（如「#header」，匹配id属性为指定值的唯一元素）以及通配符选择器（「*」，匹配文档中的所有元素）。组合选择器包括后代选择器（空格）、子代选择器（「>」）、相邻兄弟选择器（「+」）和通用兄弟选择器（「~」），它们通过连接符定义元素之间的层级关系。伪类选择器（如「:hover」「:nth-child」）选择处于特定状态的元素，伪元素选择器（如「::before」「::after」）创建虚拟的文档部分。属性选择器（如「[type='text']」）根据元素属性值进行匹配。这些类型可以自由组合，形成强大的选择器表达式。
CSS选择器权重（特异性）的a-b-c计算方法是什么？
CSS选择器的特异性（Specificity）采用「a-b-c」三位数计算体系：a位代表ID选择器的数量（如「#main」），b位代表类选择器、属性选择器和伪类选择器的数量（如「.container」、「[type]」、「:hover」），c位代表元素选择器和伪元素选择器的数量（如「div」、「::before」）。例如，选择器「#nav .menu li:hover」的特异性为1-2-1（1个ID + 2个类/伪类 + 1个元素），而「div p」的特异性为0-0-2。特异性数值高的规则优先于数值低的规则应用。如果两个选择器特异性完全相同，则后定义的CSS规则生效。通配符选择器「*」和组合选择器（如「>」「+」「~」）不计入特异性计算。
伪类和伪元素有什么区别？
伪类和伪元素最核心的区别在于语法和功能定位。伪类使用单冒号「:」语法（如「:hover」「:nth-child(2)」），用于选择处于特定状态或位置的元素本身——它不创造新元素，只是根据条件筛选已有元素。伪元素使用双冒号「::」语法（如「::before」「::after」「::first-letter」），用于在元素的DOM结构中创建或选择虚拟的子部分——它实际上在文档树之外生成了新的内容节点。例如，「:hover」在鼠标悬停时选中元素本身添加样式，而「::before」在元素的内容前面插入一个可样式化的虚拟元素。注意：由于历史兼容性原因，部分旧浏览器也支持用单冒号书写伪元素（如「:before」），但在现代项目中应遵循W3C规范使用双冒号。
querySelectorAll不工作或返回空结果的常见原因是什么？
querySelectorAll返回空结果或不工作通常由以下几个原因造成：第一，选择器语法错误，例如拼写错误、缺少选择符前缀（如把「.class」写成「class」）、括号不匹配等。第二，选择器匹配的元素确实不存在于目标DOM中——可能是类名拼写有误、大小写不匹配（CSS类名区分大小写）或者目标元素尚未渲染完成。第三，在document上调用querySelectorAll时，如果文档尚未加载完毕，可能查询不到尚未解析到的元素。解决方案是将查询代码放在DOMContentLoaded事件或页面底部执行。第四，查询的根节点选择错误——例如在某个子元素上调用querySelectorAll却查询了一个不存在于该子树中的选择器。使用工具测试时，确保选择器输入框中的表达式没有多余的空格或不可见字符。
属性选择器有哪些高级用法？
属性选择器是CSS中最强大但常被忽视的选择器类型之一，提供多种灵活的匹配模式。「[attr]」选择所有具有该属性的元素，不论属性值；「[attr=value]」精确匹配属性值；「[attr~=value]」匹配属性值中包含以空格分隔的指定单词的元素；「[attr|=value]」匹配属性值以指定值开头（通常用于语言属性如「lang」）；「[attr^=value]」匹配属性值以指定字符串开头的元素；「[attr$=value]」匹配属性值以指定字符串结尾的元素；「[attr*=value]」匹配属性值中包含指定子字符串的元素。实际应用中，可以用「[href^='https']」选择所有外部链接、用「[src$='.png']」选择所有PNG图片、用「[data-role*='button']」选择所有包含button角色的组件。属性选择器还支持与伪类组合使用，如「[type='text']:focus」可精确定位获得焦点的文本输入框。
通配符选择器*会影响页面性能吗？
通配符选择器「*」会匹配文档中的所有元素，因此在选择器表达式中使用它时需要谨慎。当「*」作为选择器的第一个部分（如「* > .child」或「* + .sibling」）时，浏览器需要遍历所有DOM节点来进行匹配，在大型文档中可能产生可感知的性能开销。然而，如果「*」仅用于重置样式（如「* { margin: 0; padding: 0; }」），其性能影响通常可以忽略不计，因为浏览器对此类全局规则有专门的优化机制。在现代CSS实践中，建议尽量使用更具体的选择器替代通配符，或利用「:is()」和「:where()」伪类来简化选择器链，既保持代码可读性又避免不必要的性能损耗。
如何利用本工具高效学习CSS选择器？
利用本工具学习CSS选择器的最佳路径如下：首先从最基础的选择器开始，依次测试元素选择器、类选择器和ID选择器，建立基本概念。然后逐步学习组合选择器，通过实际操作理解后代、子代、兄弟关系的区别。接下来挑战伪类选择器，重点掌握「:nth-child」「:not」「:first-of-type」等常用伪类的匹配逻辑。最后深入属性选择器和伪元素，理解它们在实际项目中的应用场景。建议每次学习一个新概念后，都手动编写几个不同的测试用例来验证理解。工具的高亮反馈机制能帮助您快速发现和纠正认知偏差，形成对选择器匹配规则的直觉判断。