仅设置自定义属性为无效值时，例如 color: var(--x) 但 --x 不是合法颜色，最终效果如何？
围绕“仅设置自定义属性为无效值时，例如 color: var(--x) 但 --x 不是合法颜色，最终效果如何”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要区分自定义属性继承有效但使用该值的属性变为无效，可能回落继承或 initial。
核心关键词CSS custom property invalid at computed-value time
面试知识索引 · 分类、标签与搜索
5000 道程序员面试题，每题都有完整答案
程序员面试题库第 24 页，收录第 1151–1200 题，共 5000 道完整解析，覆盖前端、JavaScript、React、Vue、Node.js、AI Agent、网络、数据库与系统设计。
5,000完整问题
52技术分类
178检索标签
100索引分页
快速定位
分类、标签与关键词搜索
技术分类52 个
全部分类5000AI Agent511浏览器301JavaScript285React281AI 开发262CSS240Node.js217TypeScript206Vue180前端工程化138React Native135
查看全部 52 个分类
热门标签178 个
查看其余 163 个标签
测试109数据库事务95实时通信92Web 可访问性90动画79可观测性77Agent 记忆75向量检索66工具调用66LangGraph59Prompt56任务规划53排障与运维53数据库索引52浏览器自动化51Flexbox50值与类型50GraphQL49事务与并发49构建与镜像49DNS 与 TLS48工程协作与交付48AI 评测47CSS Grid47Express 服务47MCP47副作用与同步47向量与嵌入47文件与多媒体47流与二进制47传输与协议46列表与性能46可维护代码46响应式原理46容器运行46指标日志追踪46数据建模与运维46文件与 I/O46表单与输入46MCP 协议45RAG45Vite 与模块构建45Webpack45内存与虚拟化45原生集成45多 Agent45工作负载与发布45应用与性能45数据处理45模块与工具链45组件与模板45缓存与数据结构45网络与运维45评估与调试45身份认证与授权45运行时与开发45Web 系统方案44一致性与容错44侦听与生命周期44分布式使用44原生组件与交互44可访问交互44消息与异步处理44渲染与调度44索引与执行计划44组件设计44缓存与代理44进程与并发44层叠与选择器43攻击面与防御43文档数据库43权限与安全43离线与渐进增强43语义与文档43请求与通信 API43Worker 与线程协作42事件系统42存储与离线数据42服务架构42服务端与流式渲染42服务端工程42泛型设计42版本控制42类型收窄42类型运算42组件与端到端42编码与执行42进程与线程42DOM 与文档操作41Flex 布局41HTTP 语义41NestJS 架构41REST 与接口契约41SQL 查询41加载与交互性能41动画与视觉41类型工程41记忆与状态41运行时与调度41Agent 架构40WebAssembly 集成40单元与集成测试40多 Agent 协作40工作流编排40模块与语言机制40浏览器与 UI 自动化40生产运行40函数与作用域39响应式设计39性能与并发39类型系统基础39Grid 布局38数组与集合38盒模型与排版38Hooks 与复用37应用开发37推理与成本37状态共享37知识库数据37模型与应用评测36对象与原型35状态与渲染35语言与并发35异步与 Promise34Effect32RAG 检索31React 性能31响应式与性能31微调与数据31TanStack Query30全栈边界30数据与缓存30大模型基础29路由与数据流29事件循环28流式交互28提示与上下文设计27数据与服务端27组件与依赖注入27组件与响应式27多模态应用24应用与渲染24Hydration22沙箱安全22状态管理18算法18CI/CD13语言与运行时10React Server Components6搜索与排序4实用函数实现3链表栈队列3图算法2字符串算法2树与遍历2索引与高级结构2Kubernetes1作用域与函数1动态规划1异步与浏览器1手写与交互性能1数组与双指针1相等比较1
第 24 页
本页面试问题
按稳定语义路径排序
- 1151
- 1152
CSS 自定义属性的作用域如何限定到特定组件？有哪些推荐模式？
围绕“CSS 自定义属性的作用域如何限定到特定组件？有哪些推荐模式”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需提出利用后代选择器或作用域伪类，但避免污染全局，同时不深入 Shadow DOM 细节。
核心关键词CSS 自定义属性 组件作用域 实践 - 1153
动态伪类 :hover 和 :focus 在使用时有哪些注意事项？例如触屏设备上的行为。
围绕“动态伪类 :hover 和 :focus 在使用时有哪些注意事项？例如触屏设备上的行为”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需提及鼠标悬停和键盘焦点，以及 :focus-visible 的差别。
核心关键词CSS :hover :focus dynamic pseudo-class - 1154
::first-line 伪元素能对哪些类型的元素生效？为什么对块级和行内元素会有差异？
围绕“::first-line 伪元素能对哪些类型的元素生效？为什么对块级和行内元素会有差异”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需指出只对块容器内第一行有效，但 flex 和 grid 容器中不起作用，说明理由。
核心关键词CSS ::first-line pseudo-element applicability - 1155
:has() 伪类为什么被称为“父选择器”？它的引入对 CSS 选择器有哪些影响？
围绕“:has() 伪类为什么被称为“父选择器”？它的引入对 CSS 选择器有哪些影响”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释能选择包含某子元素的元素，以及性能注意。
核心关键词CSS :has() relational pseudo-class - 1156
当同时存在带 !important 和不带 !important 的规则时，默认的层叠优先级顺序是什么？
CSS !important 优先级怎么排？解释普通与重要声明的来源顺序、@layer 反转规则、内联样式和动画过渡的边界，并用可运行 HTML 示例定位样式冲突。
核心关键词CSS !important cascade precedence order - 1157
请比较 inherit、initial、unset 在可继承和不可继承属性上的表现有何不同？
本文通过对比 inherit、initial、unset 在可继承与不可继承属性上的差异，解释 unset 的动态等价规则，并给出工程场景与边界。
核心关键词CSS inherit initial unset inheritance - 1158
在实战中，何时适宜用 inherit 关键字来强制子元素继承父属性？
围绕“在实战中，何时适宜用 inherit 关键字来强制子元素继承父属性”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需举例说明如按钮重置字体颜色，但不应滥用。
核心关键词CSS inherit 关键字 实际使用场景 - 1159
当父元素定义了某个可继承属性，子元素自身也有相同属性时，如何判定子元素的最终值？
围绕“当父元素定义了某个可继承属性，子元素自身也有相同属性时，如何判定子元素的最终值”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明子元素自身规则（哪怕优先级低）优先于继承值，且若无自身规则，继承值参与层叠。
核心关键词CSS 继承属性 子元素覆盖 最终值 - 1160
:is() 和 :where() 在优先级上有何关键差异？它们适合在哪些场景使用？
围绕“:is() 和 :where() 在优先级上有何关键差异？它们适合在哪些场景使用”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需明确 :is() 取最高优先级，:where() 为零，并给出示例。
核心关键词CSS :is() vs :where() specificity - 1161
当未使用 @layer 的全局样式与 @layer 中的样式冲突时，谁优先级更高？
围绕“当未使用 @layer 的全局样式与 @layer 中的样式冲突时，谁优先级更高”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明未分层的样式优先级高于任何分层样式，除非分层中带 !important。
核心关键词CSS unlayered styles override layered - 1162
请解释 @layer 的作用，并简要说明如何定义层叠层以及默认顺序的影响。
围绕“请解释 @layer 的作用，并简要说明如何定义层叠层以及默认顺序的影响”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 @layer 可以分组规则并控制优先级，未指定顺序时按出现顺序，但常用顺序需指定。
核心关键词CSS @layer cascade layer - 1163
在带 !important 时，层叠层的优先级顺序会如何反转？
围绕“在带 !important 时，层叠层的优先级顺序会如何反转”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明正常情况下靠后的层优先，但带 !important 时靠前的层优先，这是常见的误区。
核心关键词CSS cascade layer !important reverse order - 1164
假设存在多个 @layer 语句，各层多次出现时其最终顺序如何确定？
围绕“假设存在多个 @layer 语句，各层多次出现时其最终顺序如何确定”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明浏览器按第一次出现的顺序确定，后续语句只追加规则。
核心关键词CSS @layer multiple statements order - 1165
如果两个规则来自不同层叠层但优先级相同，决定胜负的是层顺序还是层内顺序？
围绕“如果两个规则来自不同层叠层但优先级相同，决定胜负的是层顺序还是层内顺序”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释外层顺序优先于内层规则顺序，且未分层规则视为在最后。
核心关键词CSS cascade layer priority order - 1166
:nth-child 的表达式 an+b 如何工作？请举例说明 2n、2n+1 和 n+3 分别选中哪些元素。
围绕“:nth-child 的表达式 an+b 如何工作？请举例说明 2n、2n+1 和 n+3 分别选中哪些元素”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释从 1 开始计数，公式中 n 的态度，以及奇偶数常用写法。
核心关键词CSS :nth-child an+b formula - 1167
:only-child 和 :only-of-type 的选择条件是什么？它们与其它结构伪类有何关联？
围绕“:only-child 和 :only-of-type 的选择条件是什么？它们与其它结构伪类有何关联”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明它们判断是否唯一的子元素或类型，但不要求必须与兄弟比较，扩展到与 first-child 的比较。
核心关键词CSS :only-child :only-of-type - 1168
如需兼容旧浏览器，在书写伪类时应采用哪些实践，例如添加前缀或降级方案？
围绕“如需兼容旧浏览器，在书写伪类时应采用哪些实践，例如添加前缀或降级方案”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需举具体伪类如 :focus-within 的 @supports 降级。
核心关键词CSS 伪类 旧浏览器兼容 降级方案 - 1169
:indeterminate 伪类可用于哪些元素？比如复选框尚无选中状态时。
围绕“:indeterminate 伪类可用于哪些元素？比如复选框尚无选中状态时”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明用于 checkbox 通过 JS 设置，也可能用于 radio 组无预选。
核心关键词CSS :indeterminate pseudo-class checkbox - 1170
:focus-within 伪类对哪些场景很有用？它和 :focus 的继承关系如何？
围绕“:focus-within 伪类对哪些场景很有用？它和 :focus 的继承关系如何”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释当子元素获得焦点时父元素匹配，用于表单高亮。
核心关键词CSS :focus-within pseudo-class usability - 1171
:required 与 :optional 伪类是如何对应输入框属性的？请结合实际表单验证场景。
围绕“:required 与 :optional 伪类是如何对应输入框属性的？请结合实际表单验证场景”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释它们根据 required 属性，但不能直接判断有效/无效，可配合 :valid。
核心关键词CSS :required :optional input validation - 1172
:target 伪类是如何根据 URL 片段工作的？请举例说明其在导航中的应用。
围绕“:target 伪类是如何根据 URL 片段工作的？请举例说明其在导航中的应用”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明匹配 id 的元素，以及多个目标未定义的情况。
核心关键词CSS :target pseudo-class URL hash - 1173
::before 和 ::after 伪元素生成的内容是否影响元素的几何尺寸？其 content 属性可以设置哪些值？
围绕“::before 和 ::after 伪元素生成的内容是否影响元素的几何尺寸？其 content 属性可以设置哪些值”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明默认是行内级，伪元素也会参与布局，可设 text 和 attr()，但不允许设置嵌套伪元素。
核心关键词CSS ::before ::after content property - 1174
::selection 伪元素可以自定义哪些样式？它对哪些属性有限制？
围绕“::selection 伪元素可以自定义哪些样式？它对哪些属性有限制”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需明确可以设 color、background 等，但限制如 display 无效，并提及有些属性不支持继承。
核心关键词CSS ::selection pseudo-element restrictions - 1175
:in-range 和 :out-of-range 伪类适用于哪些控件？如何设置范围并触发？
围绕“:in-range 和 :out-of-range 伪类适用于哪些控件？如何设置范围并触发”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕须提到可适用于 input[type=number] 或 range，需 min/max 属性。
核心关键词CSS :in-range pseudo-class input range - 1176
伪类（如 :hover）和伪元素（如 ::before）在选择器上的区别是什么？在书写时如何注意冒号？
围绕“伪类（如 :hover）和伪元素（如 ::before）在选择器上的区别是什么？在书写时如何注意冒号”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需明确分别、历史单冒号的原因以及主流写法，并举例说明，不深入全部伪类。
核心关键词CSS pseudo-class vs pseudo-element selectors - 1177
使用 revert 重置已继承的属性时，会恢复为父元素的继承值还是用户代理默认值？
围绕“使用 revert 重置已继承的属性时，会恢复为父元素的继承值还是用户代理默认值”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释 revert 在继承属性上会恢复为父元素计算值，若父元素未设则为浏览器默认。
核心关键词CSS revert inherited property reset - 1178
revert 和 revert-layer 关键字在层叠中分别有什么作用？主要区别是什么？
围绕“revert 和 revert-layer 关键字在层叠中分别有什么作用？主要区别是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 revert 回退到用户代理样式，revert-layer 回退到上一层叠层的样式，并给出使用场景，不深入所有级联来源。
核心关键词CSS revert vs revert-layer - 1179
@scope 与 Shadow DOM 的样式隔离有何关系？可以替代吗？
围绕“@scope 与 Shadow DOM 的样式隔离有何关系？可以替代吗”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 @scope 是作用域，但不能替代 shadow DOM 的隔离机制，属于两个维度，不深入 Shadow DOM 部分。
核心关键词CSS @scope vs Shadow DOM - 1180
@scope 规则在 CSS 中的作用是什么？如何定义作用域限制？
围绕“@scope 规则在 CSS 中的作用是什么？如何定义作用域限制”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释 @scope 能让样式限定在 DOM 子树内，影响优先级，但注意浏览器兼容性，不深入 to() 语法细节。
核心关键词CSS @scope rule cascade - 1181
@scope 中的 lower bound（to）有何用途？与 :scope 伪类有何区别？
围绕“@scope 中的 lower bound（to）有何用途？与 :scope 伪类有何区别”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 lower bound 可以终止作用域范围，:scope 指匹配元素本身。
核心关键词CSS @scope lower bound :scope - 1182
对于选择器「ul#nav li.active a:hover」，其优先级各组成部分的数值是多少？
解释如何计算 ul#nav li.active a:hover 的优先级：ID、类、伪类、元素数量，明确伪类算类级别，最终结果为 1-2-3。
核心关键词CSS specificity 优先级计算 示例 - 1183
两个相同优先级的规则发生冲突时，CSS 如何决定最终采用哪一条？
本题给出同优先级规则冲突的判定结论：同层同源时后写的规则胜出；引入层叠层 @layer 后层顺序优先于层内来源顺序，并说明无层样式的默认位置与判断步骤。
核心关键词CSS cascade equal specificity order - 1184
为什么通常说 ID 选择器的优先级高于类选择器？请依据优先级计算规则说明。
本文依据 CSS 优先级计算规则，解释为何 ID 选择器（1-0-0）在数值上始终高于类选择器（0-1-0），并说明少用 ID 的工程原因，兼顾讨论 !important 带来的影响。
核心关键词CSS ID vs class specificity - 1185
在 CSS 中，内联样式和 !important 是如何参与优先级计算的？
围绕“在 CSS 中，内联样式和 !important 是如何参与优先级计算的”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释内联样式与 !important 在优先级中的覆盖关系及与选择器优先级的区别。
核心关键词CSS 优先级 内联样式 !important 计算 - 1186
:not() 伪类的优先级是如何计算的？与普通选择器有何不同？
围绕“:not() 伪类的优先级是如何计算的？与普通选择器有何不同”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 :not() 会使优先级为参数中选择器的最高优先级，且列表可多个。
核心关键词CSS :not() specificity calculation - 1187
:enabled 和 :disabled 伪类能适用于哪些元素？如果对链接使用会怎样？
围绕“:enabled 和 :disabled 伪类能适用于哪些元素？如果对链接使用会怎样”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明它们主要针对表单控件，链接不能用。
核心关键词CSS :enabled :disabled form elements - 1188
:first-child 与 :first-of-type 在选择元素上有什么本质区别？
围绕“:first-child 与 :first-of-type 在选择元素上有什么本质区别”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需通过例子说明是兄弟上的第一个还是同一类型的第一个，并提示各自适用的场景。
核心关键词CSS :first-child vs :first-of-type - 1189
在 var() 函数中提供多个备用值是否有效？如果可以，其回退机制是怎样的？
本文解析 var() 的语法限制：仅支持一个 fallback，多值会被当作整体。并说明回退触发条件、无效值处理及工程场景中的误用后果。
核心关键词CSS var() fallback value cascade - 1190
用 animation-play-state: paused 暂停动画时，如果中途修改关键帧，动画会如何表现？
围绕“用 animation-play-state: paused 暂停动画时，如果中途修改关键帧，动画会如何表现”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明暂停时修改关键帧对后续播放的影响，并关注状态保持与重排。
核心关键词CSS animation-play-state 暂停时修改关键帧 - 1191
交替动画中 animation-direction: alternate 与 reverse 分别如何改变关键帧的执行顺序？
本文对比 animation-direction 的 alternate 与 reverse 如何影响关键帧的执行顺序：alternate 奇偶轮交替，reverse 每轮都倒序；并通过场景、边界和误区给出判断依据。
核心关键词CSS animation-direction alternate 与 reverse 区别 - 1192
动画的 animationstart、animationend 与 animationiteration 事件分别在什么情况下触发？
围绕“动画的 animationstart、animationend 与 animationiteration 事件分别在”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明事件触发顺序与延迟影响以及循环,不讨论 JS API 监听方式。
核心关键词CSS animationstart animationend animationiteration 触发时机 - 1193
animation-fill-mode: backwards 与 both 在动画尚未开始时的样式表现有何差异？
本题解释 animation-fill-mode 中 backwards 与 both 在动画延迟期间的表现差异，核心结论是延迟期间两者相同，区别仅在动画结束后。通过具体场景和判断边界帮助理解如何选择。
核心关键词CSS animation-fill-mode backwards 与 both 区别 - 1194
如何让动画无限循环并且让元素在每次循环之间保持一定延迟？
本题说明animation-delay不能控制循环间隔，并给出将延迟并入动画时长、通过关键帧制造空转段的实现。同时指出状态未闭合时会产生跳变，可用animation-direction或二段式结构规避。
核心关键词CSS animation 无限循环 每次循环加延迟 - 1195
在关键帧动画中，关键帧选择器百分比与 from/to 如何对应？如果只有部分百分比会怎样？
围绕“在关键帧动画中，关键帧选择器百分比与 from/to 如何对应？如果只有部分百分比会怎样”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要讲清述 from/to 等价于 0%/100%，并补全缺失关键帧的插值行为。
核心关键词CSS keyframes 百分比 from to 对应关系 - 1196
animation-play-state: paused 与 animation-delay 中设置负值对动画开始时间的影响有何不同？
围绕“animation-play-state: paused 与 animation-delay 中设置负值对动画开始时”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要比较暂停状态保持与负延迟快进。
核心关键词CSS animation-play-state 与负 animation-delay 区别 - 1197
如何用 CSS 让动画进度与滚动位置联动？当前浏览器原生支持的注意事项是什么？
围绕“如何用 CSS 让动画进度与滚动位置联动？当前浏览器原生支持的注意事项是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕涉及 animation-timeline 与 scroll-timeline。
核心关键词CSS scroll-timeline 滚动驱动动画 - 1198
backdrop-filter 与 filter 有何区别？backdrop-filter 对元素背景的模糊近似原理是什么？
围绕“backdrop-filter 与 filter 有何区别？backdrop-filter 对元素背景的模糊近似原理”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖区分作用于本身与背景。
核心关键词CSS backdrop-filter 与 filter 区别 - 1199
backface-visibility: hidden 在 3D 卡片翻转中解决什么问题？
围绕“backface-visibility: hidden 在 3D 卡片翻转中解决什么问题”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明防止背面显示镜面内容。
核心关键词CSS backface-visibility 卡片翻转 - 1200
在哪些情况下会创建独立的合成层？如何利用 will-change 提升动画性能？
围绕“在哪些情况下会创建独立的合成层？如何利用 will-change 提升动画性能”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖列出常见触发条件，并说明过度使用 will-change 反而带来内存开销。
核心关键词CSS will-change 合成层 创建条件