# 1. Flex 容器 min-width: 0 在子元素文本省略失效中的关键作用 A flex 子项默认 min-width: 0，省略号直接生效 B min-width: 0 会使元素宽度变为负数 C text-overflow 不依赖 overflow 即可生效 D min-width: auto 阻止子项收缩到内容宽度以下，需用 min-width: 0 解除 ✓ 正确答案
# 2. contain-intrinsic-size 在虚拟滚动与占位布局中的尺寸稳定性 A contain-intrinsic-size 为跳过渲染的元素提供占位尺寸，防止滚动跳动 ✓ 正确答案 B contain-intrinsic-size 用于控制元素的 overflow 行为 C content-visibility: auto 会彻底从 DOM 移除元素 D contain-intrinsic-size 只对 img 元素生效
# 3. BFC、IFC、Flex、Grid 容器格式化上下文的触发条件 A overflow: visible 可以触发 BFC B BFC 内部相邻兄弟仍会发生外边距折叠 C display: block 的元素一定建立 BFC D Flex 容器建立 flex formatting context，子项按主轴/交叉轴排列 ✓ 正确答案
# 4. 块级元素垂直外边距折叠的发生条件与边界 A 父元素建立 BFC 后，子元素外边距不再向外穿透 ✓ 正确答案 B 水平外边距也会发生折叠 C 浮动元素之间仍会发生外边距折叠 D 外边距折叠只发生在 display: flex 容器中
# 5. 标准盒模型与替代盒模型（box-sizing）在布局计算中的差异 A content-box 的 width 包含 padding B box-sizing 只影响高度不影响宽度 C 两种盒模型下 width 的含义完全相同 D border-box 的 width 包含 padding 与 border ✓ 正确答案
# 6. :where/:is/:not/:has 选择器在特异性管理与选择器优先级计算的应用 A :where() 与 :is() 的特异性相同 B :not() 不参与特异性计算 C :is() 的特异性取参数列表中最高的一项 ✓ 正确答案 D :has() 的特异性恒为 0
# 7. CSS Nesting（& 选择器嵌套）的浏览器支持与 SCSS/Less 后处理器差异的工程价值 A 原生嵌套支持变量与混合宏 B SCSS 嵌套语法在浏览器中可直接运行 C 原生 CSS 嵌套必须显式使用 & 引用父选择器 ✓ 正确答案 D 原生 CSS 嵌套目前没有任何浏览器支持
# 8. CSS 自定义属性继承与 :root 全局变量的语义边界 A 自定义属性不参与继承 B var() 在变量未定义时直接导致样式失效报错 C 自定义属性沿 DOM 树继承，:root 定义即全局可见 ✓ 正确答案 D 自定义属性只能在 :root 中定义
# 9. CSS :has() 选择器在父选择器能力的工程化应用（卡片 hover 联动、表格行选择） A :has() 只能选择直接子元素 B tr:has(input:checked) 可以高亮选中的表格行 ✓ 正确答案 C :has() 无法表达兄弟元素关系 D :has() 在 Firefox 中不支持
# 10. !important 在级联层中的边界与团队规范 A !important 声明恒为最高优先级，层顺序对 important 无效 B 内联样式永远无法被外部 !important 覆盖 C 在 @layer 中，!important 会反转层的优先级顺序 ✓ 正确答案 D !important 与特异性无关，可随意使用
# 11. CSS 选择器优先级（Specificity）的计算规则与权重 A 同特异性下后出现的规则生效 ✓ 正确答案 B 类选择器与 ID 选择器权重相同 C 继承样式与直接命中规则同等比较 D 伪元素计入类选择器权重
# 12. :user-invalid/:user-valid 在已交互字段校验的工程价值 A :user-invalid 只在用户交互后才匹配无效状态 ✓ 正确答案 B :user-invalid 在页面加载时立即匹配无效字段 C :invalid 比 :user-invalid 触发得更晚 D :user-invalid 只对 input[type=text] 生效
# 13. :placeholder-shown 与 :user-invalid 在表单状态样式的组合使用 A :placeholder-shown 在输入内容后仍会匹配 B :placeholder-shown 与输入值无关 C :placeholder-shown 匹配占位符可见的空输入框 ✓ 正确答案 D :placeholder-shown 只能用于 textarea
# 14. :focus-visible 与 :focus 在无障碍键盘导航的差异 A :focus-visible 只在浏览器判定需要可见焦点时匹配，键盘导航时命中 ✓ 正确答案 B :focus-visible 在鼠标点击获得焦点时也会匹配 C :focus 只在键盘导航时匹配 D :focus-visible 无法在旧浏览器中回退
# 15. CSS 自定义属性的继承与 @property 注册的语法差异 A 普通自定义属性携带类型信息可参与动画插值 B @property 注册后自定义属性获得语法类型、初始值并支持插值 ✓ 正确答案 C @property 无法声明继承性 D 自定义属性只能在 :root 中声明
# 16. :has() 父选择器的语法与浏览器支持（已全平台纳入 Baseline） A :has() 已获 Chrome、Safari、Firefox 全平台支持并纳入 Baseline ✓ 正确答案 B :has() 只能接收单个选择器 C :has() 只能选择子元素 D :has() 在 IE 中也可使用
# 17. CSS Anchor Positioning（position-anchor/anchor-name/position-area） A anchor-name 用于声明被定位元素关联的锚点 B position-anchor 声明被定位元素使用的锚点，position-area 指定相对锚点的区域 ✓ 正确答案 C position-area 用于给锚点元素命名 D Anchor Positioning 必须依赖 JS 计算坐标
# 18. CSS Subgrid（grid-template-rows/columns: subgrid） A subgrid 使子网格复用父网格的轨道定义，实现严格对齐 ✓ 正确答案 B subgrid 为子网格创建全新独立的轨道系统 C subgrid 只能用于列不能用于行 D subgrid 会脱离父网格布局
# 19. CSS Grid 的 grid-template-areas 在仪表盘布局的可读性 vs 显式轨道行/列 A grid-template-areas 用命名区域直观描述布局，可读性优于纯行号 ✓ 正确答案 B grid-template-areas 支持非矩形孔洞布局 C grid-template-areas 适合动态数据网格 D 使用 grid-template-areas 时不能定义轨道尺寸
# 20. Flexbox 的 align-content vs align-items 与多行布局的语义差异 A align-items 控制行内元素对齐，align-content 控制多行整体分布 ✓ 正确答案 B align-content 控制单行内部元素的交叉轴对齐 C 多行布局中 align-items 不生效 D align-content 在单行布局中优先于 align-items
# 21. Container Queries（@container）与容器查询单位的组件化适配 A 容器查询单位 cqw 相对视口宽度计算 B @container 与 @media 的作用完全相同 C container-type: inline-size 建立包含上下文，只能用于 Grid D cqw/cqh 相对容器尺寸计算，@container 基于容器上下文匹配 ✓ 正确答案
# 22. Grid 二维布局的显式/隐式轨道与 auto-flow A 隐式轨道由 grid-template-columns 显式定义 B grid-auto-flow: dense 保持文档顺序不变 C 隐式轨道是项目溢出显式轨道时自动生成的轨道 ✓ 正确答案 D grid-auto-rows 控制显式轨道高度
# 23. Flexbox 一维布局的对齐、换行与 gap 行为 A gap 可同时设置主轴与交叉轴间距，flex-wrap 允许换行 ✓ 正确答案 B justify-content 控制交叉轴对齐 C Flexbox 支持直接定义二维行列轨道 D flex-wrap 默认值为 wrap
# 24. CSS color-gamut/dynamic-range-limit 媒体查询在 HDR 内容展示的现代取舍 A dynamic-range-limit: high 表示支持 HDR 输出，配合 color-gamut 做渐进增强 ✓ 正确答案 B color-gamut 检测设备的动态范围 C 所有设备都支持 p3 色域 D HDR 样式无需考虑 SDR 降级
# 25. color-mix()/relative-color 与 light-dark 函数在主题与可访问对比度的工程价值 A color-mix 只能混合两种纯黑白色 B light-dark 与 color-scheme 无关 C color-mix 按比例生成颜色变体，relative color 可变换分量，light-dark 按 color-scheme 切换明暗 ✓ 正确答案 D relative color 无法调整透明度
# 26. color-mix() 在主题切换、动态颜色变体的工程化实践 A color-mix 基于设计令牌动态派生颜色变体，主题切换时自动联动 ✓ 正确答案 B color-mix 只能在 sRGB 空间混合 C color-mix 无法调整混合比例 D color-mix 需要 JS 计算颜色
# 27. OKLCH 色彩空间的感知均匀性与设计系统色阶生成（chroma.js、culori） A OKLCH 与 sRGB 的感知均匀性相同 B OKLCH 的亮度通道接近人眼感知，等步长插值视觉等距，适合程序化生成色阶 ✓ 正确答案 C OKLCH 无法表达 P3 色域 D 色阶只能手工逐一调整
# 28. color-scheme 属性与浏览器原生暗色模式的协同 A color-scheme 只影响文字颜色 B 设置 color-scheme 后无需适配内容背景 C color-scheme 声明支持的配色方案，浏览器据此渲染原生控件与滚动条 ✓ 正确答案 D color-scheme 与 prefers-color-scheme 无关
# 29. OKLCH/OKLAB 色彩空间与 P3 色域在现代设计系统中的应用 A OKLCH 提供感知均匀的颜色模型，P3 扩大色域，二者结合实现鲜艳且一致的视觉系统 ✓ 正确答案 B OKLCH 决定设备能显示多少颜色 C P3 只影响灰阶 D OKLCH 无法在 CSS 中直接使用
# 30. forced-colors 媒体查询与 Windows 高对比模式的工程适配 A forced-colors: active 在所有浏览器中默认触发 B 强制配色模式下作者颜色始终生效 C forced-colors: active 在系统强制配色时触发，应使用系统色关键字保证可见性 ✓ 正确答案 D forced-colors 与无障碍无关
# 31. prefers-reduced-transparency 与 prefers-reduced-data 的可访问性响应 A prefers-reduced-transparency 表示用户喜欢更多毛玻璃效果 B prefers-reduced-transparency 只影响文字大小 C prefers-reduced-data: reduce 表示用户希望减少数据传输，应降级非关键资源 ✓ 正确答案 D 这两个媒体查询尚无任何浏览器支持
# 32. forced-colors（Windows 高对比度模式）下的 Canvas/CanvasText 等系统色覆盖 A forced-colors 模式下作者颜色不受影响 B 系统色只影响背景不影响文字 C Canvas/CanvasText 等系统色关键字解析为强制配色值，应成对使用保证可读性 ✓ 正确答案 D forced-colors 模式下无需关注边框
# 33. prefers-color-scheme、prefers-contrast、forced-colors 的可访问性适配 A forced-colors 的优先级低于 prefers-color-scheme B prefers-contrast 表达对比度偏好，forced-colors 是更强的强制配色状态 ✓ 正确答案 C prefers-color-scheme 影响系统色解析 D 三种媒体查询互不相关无法协同
# 34. color-contrast() 与设计系统令牌（Design Token）的协作 A color-contrast 只能对比两种颜色的大小 B color-contrast 按 WCAG 对比度从候选色中选出达标颜色，可与设计令牌协作 ✓ 正确答案 C color-contrast 输出任意混合色 D color-contrast 与无障碍无关
# 35. scroll-driven animations（animation-timeline: scroll()） A animation-timeline: scroll() 将动画进度绑定到滚动位置，animation-range 控制启停区间 ✓ 正确答案 B animation-timeline: scroll() 将动画绑定到固定时间线 C scroll-driven animations 必须依赖 JS D animation-range 只作用于 transform 动画
# 36. Container Queries 与 Media Queries 的适用差异，容器查询单位(cqw/cqh)如何使用？ A cqw/cqh 相对最近容器上下文计算，Container Queries 适合组件级响应式 ✓ 正确答案 B Container Queries 基于视口尺寸匹配 C 容器查询单位等于视口单位 D Container Queries 与 Media Queries 完全等价
# 37. CSS @scope（已纳入 Baseline，含 donut scope @scope(.root) to(.limit) 限域） A @scope 把样式限定在整个文档 B @scope 无法隔离组件样式 C to() 指定样式的生效根元素 D @scope(.root) to(.limit) 将样式限定在 root 下且不包括 limit 子树，形成 donut scope ✓ 正确答案
# 38. CSS Container Queries（@container、container-type、container-name） A container-type 用于给容器命名 B @container 只能匹配视口 C container-type: size 不限制任何尺寸 D container-name 为容器命名，@container 可按名称精确匹配尺寸条件 ✓ 正确答案
# 39. Fetch Metadata（Sec-Fetch-Site/Sec-Fetch-Mode/Sec-Fetch-Dest）在服务端请求来源校验的工程实践 A Sec-Fetch-Site 由客户端任意伪造 B Fetch Metadata 是服务端响应头 C Fetch Metadata 只能用于图片请求 D Sec-Fetch-Site/Mode/Dest 由浏览器自动附加，服务端可据此拒绝跨站异常请求 ✓ 正确答案
# 40. CORP（Cross-Origin Resource Policy）与 CORS 在跨域资源加载中的互补关系与配置边界 A CORP 通过响应头声明资源允许的加载来源，与 CORS 互补形成防御 ✓ 正确答案 B CORP 与 CORS 完全等价 C CORP 只能由浏览器端设置 D CORP 无法阻止跨站嵌入资源
# 41. CSS Cascade Layers（@layer） A 后声明的层优先于先声明的层，未分层样式优先级最高 ✓ 正确答案 B @layer 中先声明的层优先级更高 C 未分层样式会被任意 @layer 覆盖 D !important 在层内保持正常顺序
# 42. position: sticky 的滚动容器约束与父元素 overflow: hidden 的失效场景 A 父元素 overflow: hidden 会成为最近的滚动容器，导致 sticky 相对它失效 ✓ 正确答案 B sticky 相对文档根元素定位不受父元素影响 C overflow: visible 也会破坏 sticky D sticky 与 overflow 无关
# 43. @layer 与 BEM、CSS Modules 的特异性层级冲突治理 A @layer 可以替代类名哈希实现命名隔离 B BEM/CSS Modules 解决命名隔离，@layer 解决层优先级，二者互补 ✓ 正确答案 C 使用 @layer 后无需 BEM D CSS Modules 与 @layer 无法共存
# 44. CSS Grid 的 auto-fill vs auto-fit 在响应式列布局的边界 A auto-fill 会折叠空轨道 B auto-fill 与 auto-fit 行为完全相同 C auto-fit 折叠空轨道使项目拉伸填满，auto-fill 保留空轨道 ✓ 正确答案 D repeat(auto-fit) 必须配合固定列数
# 45. 层叠上下文（Stacking Context）的形成条件与 z-index 生效边界 A z-index 可以在不同层叠上下文间直接比较 B transform 或 opacity 会形成层叠上下文，使内部 z-index 只能在上下文内比较 ✓ 正确答案 C 只有定位元素才能形成层叠上下文 D z-index 对 flex 子项永远不生效
# 46. CSS Modules composes 在现代组件库的工程价值 A composes 会生成嵌套选择器 B composes 只能作用于 ID 选择器 C composes 允许类组合复用规则并支持跨文件引入，避免特异性膨胀 ✓ 正确答案 D composes 会引入运行时开销
# 47. CSS Anchor Positioning 与 position-area 在 tooltip 定位的工程价值与现代浏览器支持 A Anchor Positioning 必须依赖 JS 测量 B position-anchor 用于给锚点命名 C position-area 声明弹层相对锚点的区域，配合 position-try-fallbacks 自动翻转，减少 JS 定位代码 ✓ 正确答案 D 所有浏览器均已完整支持
# 48. text-wrap: balance/pretty 与 text-wrap-mode: wrap 在排版体验的工程取舍 A balance 适合长段落正文 B text-wrap: balance 均衡标题行宽，pretty 优化长文本断行，text-wrap 是 mode 与 style 的缩写 ✓ 正确答案 C text-wrap 只控制是否换行 D balance 会显著提升长文本性能
# 49. content-visibility: auto 与 contain-intrinsic-size 在长列表的首屏渲染优化 A content-visibility: auto 跳过离屏元素渲染，配合 contain-intrinsic-size 稳定滚动位置 ✓ 正确答案 B content-visibility: auto 会删除离屏元素 C contain-intrinsic-size 只影响图片 D content-visibility 无法优化首屏渲染
# 50. 包含块（Containing Block）的计算规则与定位元素的偏移基准 A 绝对定位以父元素内容盒为包含块 B 包含块只影响 left 不影响 top C fixed 定位永远相对视口不受祖先影响 D 绝对定位以最近定位祖先的 padding 盒为基准，fixed 默认相对视口 ✓ 正确答案
# 51. @supports 在特性检测与渐进增强（Progressive Enhancement） A @supports 检测的是运行时性能 B 不支持 @supports 的浏览器无法解析基础样式 C @supports 只能检测属性不能检测选择器 D @supports 按语法解析能力检测特性，配合基础样式实现渐进增强 ✓ 正确答案
# 52. :defined 在自定义元素未升级前的样式隔离 A :defined 匹配所有未知标签 B :defined 只对内置元素生效 C :defined 匹配已注册的自定义元素，可用 :not(:defined) 隐藏未升级元素 ✓ 正确答案 D :defined 与元素升级无关
# 53. :scope 伪类与作用域邻近度（Cascade Proximity） A :scope 匹配文档根元素 B :scope 匹配当前作用域根元素，@scope 中邻近度高的规则优先 ✓ 正确答案 C @scope 内所有规则优先级相同 D 邻近度与特异性无关
# 54. 属性选择器的精确匹配（=、~=、|=、^=、$=、*=）的应用场景 A [attr^=v] 匹配属性值以 v 结尾 B [attr~=v] 匹配值包含子串 v C [attr|=v] 匹配等于 v 或以 v- 开头的值 ✓ 正确答案 D [attr*=v] 匹配以 v 开头的值
# 55. CSS 选择器优先级（特异性）的四元组（a,b,c,d）在工程实践中如何避免过度嵌套 A 四元组中 a 表示类选择器数 B 类型选择器权重高于类选择器 C 内联样式不参与特异性计算 D 嵌套加深使特异性累积，BEM 与 :where 等策略可保持低特异性 ✓ 正确答案
# 56. :is() 与 :where() 选择器在特异性管理与代码可读性的取舍策略 A :where() 的特异性恒为 0，:is() 取参数最高特异性 ✓ 正确答案 B :is() 的特异性恒为 0 C :is() 与 :where() 特异性相同 D :where() 不能接收选择器列表
# 57. ::before 与 ::after 伪元素在装饰性内容与可访问性的边界 A 伪元素 content 文本会被屏幕阅读器朗读 B ::before/::after 生成的 content 默认不进入可访问性树，语义信息应放入真实 DOM ✓ 正确答案 C 伪元素只能承载文本 D 伪元素内容参与文档大纲
# 58. CSS 嵌套选择器（CSS Nesting Module）原生支持在工程上的迁移成本与收益 A 原生嵌套与 SCSS 嵌套语法完全一致 B 嵌套不会影响选择器特异性 C 原生嵌套后代选择器需显式使用 &，迁移需考虑旧浏览器编译与特异性变化 ✓ 正确答案 D 原生嵌套无需任何构建工具
# 59. @scope（已纳入 Baseline）含 donut scope 在组件级样式隔离的现代取舍 A @scope 创建新的 DOM 树边界 B donut scope 用 to() 排除内部子树，@scope 依赖选择器范围而非树边界 ✓ 正确答案 C @scope 的隔离强度强于 Shadow DOM D @scope 会阻断事件冒泡
# 60. @layer 样式层级在设计系统与三方样式覆盖的优先级管理 A @layer 无法覆盖第三方库样式 B 使用 @layer 后无需考虑层顺序 C 把第三方样式放入低优先级层，业务样式放入高层或未分层，覆盖关系可预测 ✓ 正确答案 D @layer 只对 class 选择器生效
# 61. attr() 函数在 CSS 中获取 HTML 属性值的能力扩展（如 attr(data-icon)） A attr() 只能用于 color 属性 B attr() 只能读取 class 属性 C attr() 会随属性变化自动更新 D attr() 可读取 HTML 属性值，类型化语法支持更多属性但兼容性有限 ✓ 正确答案
# 62. @property 自定义属性注册在动画插值与类型校验的现代应用 A @property 使自定义属性获得类型并可参与动画插值，非法值回退初始值 ✓ 正确答案 B @property 注册后自定义属性仍是纯字符串 C @property 无法声明初始值 D @property 只对颜色生效
# 63. CSS :not() 选择器链式组合在表单校验伪类中的语义化应用 A :not() 只能接收单个简单选择器 B :not() 只能用于表单元素 C :not() 不参与特异性计算 D 链式 :not() 可精确排除多个状态，如 :not(:placeholder-shown):not(:user-invalid) ✓ 正确答案
# 64. ::placeholder 伪元素在跨浏览器样式与可访问性对比度的工程取舍 A ::placeholder 在全部浏览器写法一致 B ::placeholder 只影响背景色 C placeholder 文本不参与可读性要求 D 占位符不能替代 label，::placeholder 样式需注意兼容写法与对比度 ✓ 正确答案
# 65. 属性选择器 ^=、$=、*= 在国际化路径与文件类型匹配的取舍 A [src$=.png] 匹配以 png 开头的路径 B $= 只能用于图片路径 C [href*=x] 永远不会误匹配 D [lang|=zh] 匹配等于 zh 或以 zh- 开头的语言值，^=/$= 适合前后缀场景 ✓ 正确答案
# 66. @container 内层与外层同名自定义属性的特异性与级联覆盖 A @container 内的变量不受继承影响 B 容器查询会阻断变量继承 C 同名自定义属性按 DOM 树继承就近取值，@container 不改变级联规则 ✓ 正确答案 D @container 内变量优先级更高
# 67. @import 与 <link> 标签在样式加载顺序与性能的取舍 A @import 与 <link> 加载行为完全一致 B <link> 可并行加载并配合 preload 优化，@import 串行阻塞渲染应避免 ✓ 正确答案 C @import 可以出现在样式表任意位置 D <link> 无法加载外部样式表
# 68. CSS 变量通过 calc() 进行计算在响应式排版与组件尺寸的应用 A calc() 无法使用 var() 变量 B clamp 只能用于颜色 C calc() 只支持加法 D var() 可代入 calc() 运算，配合 clamp 实现随视口连续变化的响应式排版 ✓ 正确答案
# 69. overflow: clip 与 overflow-clip-margin 在不触发滚动条时的安全裁切 A overflow: clip 会创建可滚动容器 B overflow: clip 与 hidden 完全等价 C overflow: clip 强制裁切且不创建滚动容器，overflow-clip-margin 扩展裁切边界 ✓ 正确答案 D overflow-clip-margin 只能取负值
# 70. min-content/max-content/fit-content() 在自适应布局的工程取舍 A min-content 是内容不换行的最大宽度 B max-content 等于 min-content C fit-content 在可用空间与内容尺寸间自适应，min/max-content 分别是最小/最大内容宽度 ✓ 正确答案 D fit-content 只能用于宽度
# 71. CSS Subgrid 在嵌套卡片网格对齐的实战与浏览器支持矩阵 A subgrid 无法实现跨卡片对齐 B subgrid 复用父网格轨道实现卡片内行对齐，Chrome/Safari/Firefox 主流版本已支持 ✓ 正确答案 C subgrid 只能用于图片 D subgrid 需要 JS 计算行高
# 72. CSS Logical Properties（margin-inline-start 等）的国际化布局 A 逻辑属性在 RTL 下不会改变 B 逻辑属性只影响字体 C margin-inline-start 在 RTL 下自动映射到右侧，减少国际化覆盖代码 ✓ 正确答案 D writing-mode 不影响逻辑属性
# 73. 媒体查询断点设计与移动端 viewport meta 的协作 A viewport meta 与媒体查询无关 B viewport meta 使布局视口等于设备宽度，是媒体查询正确生效的前提 ✓ 正确答案 C 缺少 viewport meta 不影响移动端布局 D 断点必须按具体设备型号设置
# 74. @container style(--theme: dark) 容器查询在主题响应的工程价值 A style() 查询基于视口尺寸 B style() 查询等同于媒体查询 C @container style() 基于容器自定义属性响应主题，支持区域级主题 ✓ 正确答案 D style() 查询无法匹配变量
# 75. CSS Scroll Snap 在轮播/分页/图片画廊中的浏览器兼容性陷阱 A Scroll Snap 在全部浏览器实现一致 B scroll-snap-align 只能取 start C mandatory 总是最佳选择 D 需保留旧前缀兼容旧 Safari，mandatory/proximity 与 scroll-padding 影响吸附行为 ✓ 正确答案
# 76. aspect-ratio 属性与视频/卡片固定比例的实现 A aspect-ratio 需要 JS 计算高度 B aspect-ratio 直接声明宽高比，替代 padding-top 百分比 hack ✓ 正确答案 C aspect-ratio 只在无宽度时生效 D aspect-ratio 不适用于图片
# 77. accent-color 在原生控件（<input>、<progress>）的主题一致性 A accent-color 只能用于 input[type=text] B accent-color 统一 checkbox/radio/range/progress 等原生控件强调色，与 color-scheme 配合适配暗色 ✓ 正确答案 C accent-color 可以自定义控件内部结构 D accent-color 在暗色模式下自动失效
# 78. 相对颜色语法（rgb(from var(--c) r g b)）与主题 token 的派生关系 A rgb(from var(--c) r g b / 0.6) 基于 token 派生变体，color-mix 按比例混合两色，二者分工不同 ✓ 正确答案 B 相对颜色无法调整透明度 C 相对颜色语法必须使用白色作为源 D color-mix 只能生成透明色
# 79. :has() 选择器解决了什么问题，性能上有什么注意点？ A :has() 只能选择子元素 B :has() 只能用于表单 C :has() 在静态页面无任何开销 D :has() 解决父选择需求，但复杂参数与超大 DOM 会放大反向匹配开销 ✓ 正确答案
# 80. subgrid 与嵌套 grid 的差异，什么场景必须用 subgrid？ A subgrid 与嵌套 grid 完全等价 B subgrid 只能用于列 C subgrid 性能总优于嵌套 grid D 需要与父网格逐轨道对齐时（表头表体、卡片行分区）必须用 subgrid ✓ 正确答案
# 81. CSS 级联层(@layer)如何重构样式优先级管理，与 BEM/CSS Modules 如何协同？ A @layer 替代了 BEM 的命名规范 B @layer 只影响第三方库 C CSS Modules 无法与 @layer 共用 D @layer 按层管理优先级，与 BEM 的低特异性、CSS Modules 的命名隔离互补 ✓ 正确答案
# 82. CSS 阴影 box-shadow 与 filter: drop-shadow() 在图标阴影的取舍 A box-shadow 会贴合透明图标轮廓 B drop-shadow 跟随元素实际轮廓，透明图标应使用它，box-shadow 适合矩形卡片 ✓ 正确答案 C drop-shadow 与 box-shadow 完全等价 D filter 不会创建层叠上下文
# 83. CSS Nesting 与锚点定位(Anchor Positioning)当前的浏览器支持与降级策略？ A Anchor Positioning 已全平台支持无需降级 B Nesting 已获主流支持，Anchor Positioning 支持仍在完善，需用 @supports 渐进增强 ✓ 正确答案 C CSS Nesting 必须依赖编译才能使用 D Anchor Positioning 无法提供降级
# 84. OKLCH 颜色空间相比 HSL 在感知均匀性与设计系统的工程价值 A HSL 的明度与感知完全一致 B OKLCH 无法表达常见颜色 C OKLCH 亮度通道接近人眼感知，色阶与插值视觉一致，优于 HSL ✓ 正确答案 D 设计系统只能使用 HSL
# 85. 高对比度模式 prefers-contrast 在视觉无障碍的工程实现 A prefers-contrast 会强制替换所有颜色 B prefers-contrast 表达对比度偏好且作者颜色仍生效，forced-colors 则是更强的强制模式 ✓ 正确答案 C prefers-contrast 只影响字体大小 D prefers-contrast: more 表示低对比度
# 86. CSS 自定义属性在运行时动态主题切换的批量更新与重排性能 A 变量更新不产生任何性能开销 B 批量更新变量可减少样式重算，避免将高频变化变量用于 layout 属性 ✓ 正确答案 C 主题切换只触发重排不触发重绘 D 自定义属性无法在运行时更新
# 87. 暗色模式与亮色模式的图片替换方案（<picture> 与 prefers-color-scheme） A picture 只能按屏幕尺寸选择图片 B source 的 media 可按 prefers-color-scheme 切换明暗图片，img 作为回退 ✓ 正确答案 C 暗色模式图片替换必须使用 JS D prefers-color-scheme 无法用于 picture
# 88. 可访问的对比度比例（WCAG 4.5:1）在设计系统中的自动化校验 A 所有文本统一要求 4.5:1 B 普通文本 4.5:1、大文本 3:1，可在 CI 中自动化计算校验令牌配对 ✓ 正确答案 C 对比度只需人工目测 D 透明度不影响对比度计算
# 89. CSS @color-profile 在 ICC 颜色配置文件的浏览器支持与工程取舍 A @color-profile 已全平台支持 B @color-profile 用于定义字体 C @color-profile 引入 ICC 配置文件定义色彩空间，但浏览器支持有限，需谨慎使用 ✓ 正确答案 D @color-profile 与 color() 无关
# 90. mix-blend-mode 与 background-blend-mode 在视觉叠加与可访问性的冲突 A mix-blend-mode 混合元素自身的多层背景 B background-blend-mode 作用于元素与页面背景 C 混合模式不影响可读性 D mix-blend-mode 混合元素与底层内容，可能破坏文本对比度，需提供降级 ✓ 正确答案
# 91. CSS 调色板（custom palette）通过 @property 注册的工程优势 A @property 注册后变量无法动画 B @property 注册调色板获得类型校验并支持颜色插值动画 ✓ 正确答案 C @property 只能注册数字 D 注册后变量不能参与 color-mix
# 92. CSS 主题切换（:root[data-theme]）与系统偏好的协作触发机制 A 默认跟随系统偏好、显式 data-theme 覆盖，实现三态主题切换 ✓ 正确答案 B data-theme 优先级低于系统偏好 C 主题切换必须重新加载页面 D prefers-color-scheme 无法与变量配合
# 93. lch()、lab()、oklab() 在颜色插值动画的工程价值 A lab/lch/oklab 感知均匀，oklab 修正蓝紫失真，动画插值更自然 ✓ 正确答案 B sRGB 插值视觉最均匀 C oklab 无法用于 CSS 颜色 D 插值空间不影响动画效果
# 94. 颜色滤镜 filter: hue-rotate() 在色弱友好模式的工程实现 A hue-rotate 能完全补偿所有色觉缺陷 B 滤镜不影响页面性能 C 色弱模式只能使用 JS 实现 D hue-rotate 可辅助色弱区分颜色，但会扭曲整体色相且有性能开销，令牌级配色更优 ✓ 正确答案
