虚拟列表不能直接用 list-style，因其依赖原生 ul/ol 的语义结构和自动计数，而虚拟列表仅渲染可视项、DOM 扁平无嵌套，导致 list-style 失效；CSS 自定义属性需严格对齐 JS 逻辑，用于解耦样式与布局，并避免强制同步布局。
虚拟列表为什么不能直接用 list-style
因为 list-style 是为原生 <ul> / <ol> 设计的，它依赖浏览器对整个列表结构的语义解析和自动布局。而虚拟列表的核心是：只渲染可视区域内的 <li>（甚至不用 <li>），其余靠 position: absolute + transform 或 top 偏移模拟位置，DOM 结构本身是扁平、非嵌套、无语义的。此时 list-style 完全失效——没有父级 <ul> 触发样式继承，也没有连续项触发计数器（ol 的 counter-increment 也会断）。
用 CSS 自定义属性控制虚拟列表项样式的关键点
虚拟列表项通常是动态生成的 <div> 或 <article>，样式必须完全由类名或内联 style 驱动。CSS 自定义属性（--item-height、--item-padding、--item-bg 等）在这里不是“锦上添花”，而是解耦布局逻辑与视觉表现的刚需：
-
--item-height必须与 JS 中计算startIndex/scrollTop的高度值严格一致，否则滚动错位；固定高度时可设为数字，不定高度则需配合getBoundingClientRect()回填，不能只靠 CSS 变量 -
--item-border-radius和--item-shadow推荐用var(--item-border-radius, 4px)提供 fallback，避免未定义变量导致样式崩塌 - 不要在
:nth-child()上做样式，虚拟容器里 DOM 是复用的，索引不反映真实数据序号；改用 data 属性，比如[data-index="123"]，再写[data-index] { background: var(--item-bg-hover); }
如何让自定义属性真正参与滚动性能优化
CSS 自定义属性本身不提升性能，但能减少 JS 与 CSS 的重复计算。常见错误是：JS 每次 scroll 触发都手动设置 element.style.top = `${offset}px`，同时又在 CSS 里写 transform: translateY(var(--item-offset)) —— 这会导致强制同步布局（Layout Thrashing）。
正确做法是只保留一种偏移方式：
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 固定高度场景：用
top+position: absolute，CSS 中定义--item-top: 0，JS 只更新style.setProperty('--item-top', `${start * itemHeight}px`)，然后在项元素上写top: var(--item-top) - 不定高度或需 GPU 加速：统一走
transform: translateY()，JS 更新--item-translate-y，CSS 写transform: translateY(var(--item-translate-y, 0))；注意will-change: transform要加在容器上，而非每个项 - 滚动条占位元素（phantom）的高度必须用
height: calc(var(--total-items) * var(--item-height))，且--total-items必须是整数，不能是字符串或空值，否则计算结果为auto，滚动条消失
容易被忽略的兼容性陷阱
CSS 自定义属性在 IE 完全不支持，即使你用 @supports (--a: 0) 包裹，虚拟列表的 JS 逻辑也得降级为内联 style。更隐蔽的问题是：
- Firefox 对
calc()中嵌套var()的解析比 Chrome 严格，比如calc(var(--a) * var(--b))在 Firefox 中若任一变量未定义，整条声明会被丢弃，而 Chrome 可能仍尝试计算 -
getComputedStyle(element).getPropertyValue('--my-var')返回的是字符串，哪怕你设的是数字，JS 中需parseFloat()才能用于计算，否则拼接会出错 - Shadow DOM 中使用自定义属性需显式
:host { --item-height: 80px; }向内部透传，Web Components 场景下漏掉这步，子项读不到变量
真正卡住性能的往往不是渲染本身，而是变量没对齐、单位混用（px vs rem）、或在 scroll 事件里反复读写自定义属性——这些细节比算法模型更容易让虚拟列表“看起来像原生却卡得要命”。
