-
本文介绍如何使用纯JavaScript实现基于多组复选框的精准产品筛选功能，支持在单个data-*属性中存储多个空格分隔值（如data-color="redwhiteblue"），并按“所有选中条件必须同时满足”的逻辑动态显示匹配的产品项。
-
flex-wrap:wrap生效需同时满足容器宽度受限、子项设min-width或flex-basis；推荐用minmax()+repeat(auto-fit,...)替代calc()，IE11需降级为媒体查询或inline-block。
-
:not(:last-child)是最直接兼容的方式，适用于同级元素样式排除；:nth-last-child(n+2)更稳定但IE8不支持；混合标签应优先用:last-of-type；动态场景推荐类名或JS兜底。
-
原生HTML无法实现多规格联动选择，必须配合JavaScript；关键在于HTML结构设计：用<fieldset>分组、<inputtype="radio">或<button>作为选项，添加data-spec和data-value属性，避免中文判断与硬编码映射。
-
火狐浏览器需手动启用HTML5支持：一、在about:config中启用media.mediasource.enabled、webgl.enable-for-all-sites和dom.webaudio.enabled；二、禁用Flash插件并允许自动播放；三、开启WebComponents、H.264硬件解码等实验性特性；四、修改UA字符串声明HTML5就绪；五、删除mimeTypes.rdf等缓存文件并启用硬件加速。
-
PointerEvents不能简单替代MouseEvent/TouchEvent，需显式处理事件流、preventDefault()、pointerType判断及touch-action；pen设备必须用getCoalescedEvents()保障书写流畅；降级需分层检测支持度并避免事件重复监听。
-
AtomicsAPI仅支持SharedArrayBuffer上的整数/浮点数原子操作，无法替代锁或消息机制处理复杂状态同步；必须用相同视图类型访问共享内存，且需确保跨域隔离启用。
-
根本原因是字符编码未对齐，需确保HTML声明、HTTP头、文件保存、传输编码均为UTF-8；innerHTML插入时避免双重转义；HTML转义与URL编码不可混用；零宽字符等需特殊处理。
-
使用padding-bottom技巧和max-width实现响应式视频嵌入：通过设置容器width100%、height0、padding-bottom保持宽高比（如16:9对应56.25%），结合绝对定位使iframe充满容器，再添加max-width限制最大尺寸并配合marginauto居中，支持不同比例通过类名区分，确保视频在各设备正常显示。
-
JavaScript事件处理依赖浏览器任务队列调度，宏任务（如点击、setTimeout）与微任务（如Promise.then）分层执行，每次宏任务后清空微任务队列；事件委托、passive选项、stopPropagation与preventDefault区分等细节决定实际行为。
-
FlutterWeb不支持直接写HTML语句嵌套，仅可通过HtmlElementView在DOM层级混合原生HTML元素；需预定义容器ID、手动管理尺寸与z-index、避免滚动/动画widget包裹，并通过JS-Dart桥接通信，且应优先选用纯Dart方案。
-
JavaScript无原生宏系统，但可通过Babel插件、DefinePlugin等构建工具实现编译时代码替换，或用高阶函数、Proxy、模板字符串+eval模拟运行时宏行为，关键在于区分编译时与运行时需求，并兼顾代码可读性。
-
JSON.parse(JSON.stringify())不能用于生产环境，因其会丢失Date、RegExp、undefined、function、Symbol、BigInt等类型，并无法处理循环引用；仅限纯JSON安全结构的临时调试。
-
答案：:only-child伪类选择器用于选中其父元素中唯一的子元素，无论类型如何，等价于:first-child:last-child；例如p:only-child会为唯一段落添加样式，而img:only-child可实现单图居中；与:only-of-type不同，后者仅要求同类型唯一，不需整体唯一。
-
全屏背景视频需设position:fixed+width:100vw;height:100vh+object-fit:cover；z-index失效因video创建独立堆叠上下文，应加isolation:isolate；移动端需muted、autoplay、playsinline三属性并存。
