:first-of-type匹配父元素中同类型标签的第一个，而非DOM首个子元素；如父元素内有p、div、p，则首p匹配，次p不匹配，且忽略文本/注释节点。

多个类名连写（如.btn.primary）表示交集，即元素必须同时具备btn和primary两个class；:is()继承最高权重，:where()权重恒为0；~=匹配空格分隔单词，|=匹配连字符语言前缀；>匹配直接子元素，空格匹配后代元素。

requestAnimationFrame（rAF）是实现流畅动画的关键机制，1.它与浏览器刷新周期同步，避免画面撕裂和跳帧；2.在页面不可见时自动暂停以节省资源；3.提供高精度时间戳实现帧率无关动画。通过在每次重绘前调用回调函数，rAF确保动画帧与屏幕刷新同步，形成自然流畅的视觉效果。相比setTimeout/setInterval，它能更高效地调度动画逻辑，尤其在性能和节能方面表现突出。使用时需注意性能监测、避免主线程阻塞、合理管理动画状态，并结合visibilitychange事件控制动画启停，同时

本文详解如何实现多级单选按钮（如一级分类控制二级选项显隐）的健壮交互逻辑，解决因DOM状态不同步导致的“二次切换后二级按钮值为null”问题，并提供简洁、可维护的事件委托方案。

粒子系统在JavaScript中是一种基于requestAnimationFrame和Canvas2D/WebGL的手写循环编程模式，核心是初始化、更新状态、重绘三步，需控制数量、清空画布、使用deltaTime及边界重置。

应按基础层、组件层、布局层、主题层四层组织CSS结构，分别对应base.css、components.css、layout.css、theme.css，配合@layer分层或命名空间前缀控制作用域，变量需语义化并全程中转，class命名重业务语义轻语法规范。

<dialog>加open属性仅控制可见性，不触发模态行为；必须调用showModal()才启用遮罩、焦点捕获和Esc关闭，关闭须用close()而非修改open属性。

父元素缺少position:relative是伪元素定位错位的主因；需为其添加relative定位以提供参考系，注意padding、transform和content:""等影响因素。

localStorage数据不会自动过期，需手动清除或封装带时间戳的读写逻辑；不适合存敏感信息、大量数据或依赖强一致性的场景。

图文默认不对齐是因vertical-align:baseline导致图片底部与文本基线对齐而下沉；Flexbox通过display:flex+align-items:center可实现稳定垂直居中，配合gap和flex-shrink:0提升响应性与兼容性。

伪类选择器通过冒号定义元素状态或位置，实现无需类名的灵活样式控制。常用如:hover、:focus、:active用于交互反馈；:first-child、:last-child、:nth-child(n)按位置匹配子元素；:not(selector)排除特定元素；:checked处理表单选中状态。可链式组合如a:hover:focus，需注意LVHA顺序避免覆盖，且部分伪类受限于元素类型或浏览器兼容性，尤其IE支持差，移动端:hover行为异常，合理使用可减少HTML冗余并提升语义与交互体验。

JavaScript属性描述符是控制对象属性行为的核心机制，分为数据描述符（含value/writable）和存取描述符（含get/set），二者共用enumerable和configurable；configurable为false后不可逆修改。

变量提升指声明被移至作用域顶部，但赋值不提升；var声明提升并初始化为undefined，let/const存在暂时性死区，函数声明完全提升而表达式按变量处理。

本地HTML文件添加书签需用file:///加URL编码的绝对路径，Chrome/Edge要求正斜杠、三斜杠；Firefox需修改about:config禁用安全限制；更可靠方案是用http://localhost运行本地服务器。

掌握CSS盒模型是实现精准多列布局的关键。使用box-sizing:border-box可确保宽度包含padding和边框，避免溢出；Flex布局中可通过gap（部分浏览器支持）或margin配合负边距控制间距；Grid布局原生支持gap属性，能直接设置行与列的间距，更易管理且不影响盒模型计算；统一设置box-sizing并优先采用gap，可有效解决首尾贴边、间距不均等问题，提升布局整洁性与可控性。