-
:nth-child(odd)选奇数行，:nth-child(even)选偶数行，但需确保目标元素在父容器中连续、同级且无其他类型元素干扰；否则应改用:nth-of-type()或JS动态加class。
-
通过CSS为Anki卡片中的HTML5标签设置语义化颜色、分组容器、悬停动画和正反面示例，可增强视觉层次与交互反馈，1.结构类标签用蓝色、表单类用橙色、媒体类用绿色；2.正面显示标签名，反面展示代码与说明；3.添加hover缩放与阴影效果；4.使用边框分组相关标签，提升记忆效率。
-
Grid布局重排开销不一定比Flexbox大，但触发条件更敏感；其二维定位需同步计算行列轨道依赖，而Flexbox仅单向遍历主轴，尤其在动态插入项目或使用minmax()等函数时易引发多次测量。
-
WebWorkers是浏览器提供的后台线程API，用于执行CPU密集型任务而不阻塞主线程；其运行于隔离环境，无DOM访问权限，仅通过message机制与主线程通信，支持结构化克隆或Transferable零拷贝传输。
-
FinalizationRegistry用于在对象被垃圾回收时执行清理操作，典型场景包括管理C++插件分配的内存或文件句柄等非JavaScript资源，通过register注册目标对象及清理回调，利用unregisterToken可主动取消注册，避免资源泄漏。
-
老浏览器不显示HTML5新标签需用document.createElement()声明并补display:block样式，或引入html5shiv；必须在head中尽早执行且确保DOCTYPE正确。
-
可通过::placeholder伪元素设置输入框占位符样式，需兼顾::placeholder、::-webkit-input-placeholder、::-moz-placeholder、::-ms-input-placeholder等前缀以确保兼容性，支持color、font-size、opacity等文本属性，但不支持display、padding等盒模型属性。
-
用transition实现自然悬停效果需明确指定属性、合理设置时长与缓动曲线，并确保初始和hover状态值可插值，transition必须写在非hover的原始状态中。
-
本文详解为何使用AJAX调用Flutterwave标准HostedPaymentAPI时，header('Location:...')无效，以及如何通过服务端返回跳转链接、前端主动重定向来正确实现支付流程。
-
防抖和节流是防止事件失控的必要手段，用于应对scroll、input等高频事件导致的渲染卡顿、接口过载等问题；防抖适用于“用户停手后执行”，如搜索联想；节流适用于“定期执行”，如滚动加载。
-
用position:relative偏移文字时点击区域错乱，因其不脱离文档流，视觉偏移但事件区域仍在原位；应改用transform:translate()以保持交互准确且性能更优。
-
答案是通过animation-name属性将@keyframes定义的动画绑定到元素，结合JavaScript可实现动态控制。首先定义@keyframes动画序列并命名，如slideIn；然后在CSS中使用animation-name引用该名称，并配合duration、timing-function等属性设定动画效果，推荐使用animation简写提升代码简洁性；当animation-name值无效或拼写错误时动画不生效，需确保名称一致且合法；支持多个动画逗号分隔，属性按序对应，注意避免属性冲突；可通过J
-
figure是独立内容单元而非图片容器，可包含图表、代码、引文等可单独引用的内容；figcaption须唯一且位于首或尾，影响可访问性与SEO；允许多图共用一个figcaption，但需语义统一。
-
使用CSS伪类:valid和:invalid结合:placeholder-shown可实现无JavaScript的表单验证；通过border颜色变化和伪元素提示反馈输入状态，配合transition提升交互流畅度，适用于轻量级项目。
