var(--x) 的值不是合法颜色，color 最终会是什么？
var() 替换后若得到不合法的属性值，声明可能直到计算值阶段才失效，浏览器不会回头采用级联里上一条同属性声明。它会回到继承值或初始值；var() 自带的回退参数只处理变量缺失或变量本身无效，不是任意值校验。
核心关键词CSS custom property invalid at computed-value time
面试知识索引 · 分类、标签与搜索
5000+ 道程序员面试题，每题都有完整答案
程序员面试题库第 24 页，收录第 1151–1200 题，共 5000 道完整解析，覆盖前端、JavaScript、React、Vue、Node.js、AI Agent、网络、数据库与系统设计。
5000+完整问题
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 自定义属性怎么做到只在某个组件内生效？
自定义属性声明在组件根节点上会沿后代继承，局部覆盖可改变整个子树的主题值，无须都写在 :root。var() 回退值只在变量不存在或无效时参与；Shadow DOM 继承边界和 @scope 的选择器范围也会影响最终值。
核心关键词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() 为什么被叫做"父选择器"？
:has() 能按后代或相邻元素的状态选择当前元素，例如表单里有无无效输入、卡片里是否存在图片。它的优先级取决于参数选择器，复杂匹配也可能增加样式计算成本；用它选择父级时还要考虑支持范围和备选样式。
核心关键词CSS :has() relational pseudo-class - 1156
当同时存在带 !important 和不带 !important 的规则时，默认的层叠优先级顺序是什么？
!important 影响声明在 CSS 级联中的优先级，但不能只和选择器权重相比。来源与层叠层先决定重要声明的竞争顺序，重要层的排序还会反转；内联样式、动画与过渡各有位置，排查覆盖失败时需逐层比较。
核心关键词CSS !important cascade precedence order - 1157
inherit、initial 和 unset 分别把属性重置到哪个值？
inherit 强制采用父元素的计算值，initial 使用规范定义的初始值，unset 则按属性是否可继承在两者间选择。revert 会退回更低级的样式来源；重置按钮或表单控件时，这些关键字会产生不同于“恢复浏览器默认”的结果。
核心关键词CSS inherit initial unset inheritance - 1158
什么场景下需要手动写 inherit 让子元素继承父属性？
表单控件常带浏览器默认字体和颜色，因此不一定跟随父元素；显式设置 inherit 可以让它取父级计算值。链接颜色、非继承属性也能这样处理，但子元素已有自己的声明时，默认继承不会覆盖它，inherit 作为声明则会参与级联。
核心关键词CSS inherit 关键字 实际使用场景 - 1159
子元素自己写了样式，父元素的继承值还会生效吗？
继承值只在子元素没有该属性的直接声明时才使用，通配符 * 命中的低权重声明也能覆盖继承。inherit 和 unset 作为显式声明仍要参与正常级联；开发者工具里分清“本元素声明”与“从父元素继承”，才容易定位颜色或字体来源。
核心关键词CSS 继承属性 子元素覆盖 最终值 - 1160
is() 和 where() 在优先级上有什么区别？
:is() 和 :where() 都能合并多组选择器，但 :is() 采用参数中最高的优先级，:where() 始终为零。组件选择器简化时，两者可能匹配完全相同元素却产生不同覆盖结果；需要易于覆盖的基础样式更适合 :where()。
核心关键词CSS :is() vs :where() specificity - 1161
没放进 @layer 的样式和层里的样式冲突，谁赢？
未分层样式的优先级高于所有命名层，不管选择器权重。理解这条规则才能正确利用 @layer 管理第三方库样式，也能避免迁移过程中的优先级意外。会用普通声明和 important 声明分别比较，避免把两种顺序混为一谈。
核心关键词CSS unlayered styles override layered - 1162
@layer 是干什么用的？层的声明顺序怎么影响样式优先级？
@layer 把样式分组成层，层的优先级由声明顺序决定，越靠后优先级越高。掌握层叠层的声明方式和排序规则，解决第三方样式覆盖和大型项目样式冲突问题。还会说明层名首次出现的位置为何决定后续重复声明的排序。
核心关键词CSS @layer cascade layer - 1163
加了 !important 之后，层叠层的优先级顺序为什么会反转？
普通样式里后声明的层赢，加 !important 后变成先声明的层赢。理解这个反转规则，才能正确使用层叠层管理第三方库的 !important 样式。并说明未分层的 important 声明在层叠顺序中处于什么位置。
核心关键词CSS cascade layer !important reverse order - 1164
同一个层被多次打开，最终的优先级顺序怎么确定？
同一个 @layer 出现多次时，层的优先级以第一次出现为准，后续只追加规则不改变顺序。掌握预声明、多次打开、嵌套层的排序规则，避免样式优先级混乱。通过多文件重复打开同一命名层的例子，说明它不是新建一层。
核心关键词CSS @layer multiple statements order - 1165
两条规则来自不同层，优先级看层的顺序还是选择器权重？
不同层的规则冲突时，层的声明顺序优先于选择器权重和源码顺序。弄清层间比较的规则，理解为什么高权重选择器会输给低权重选择器。通过跨层冲突说明何时才轮到选择器权重和源码顺序比较。
核心关键词CSS cascade layer priority order - 1166
nth-child 的 an+b 公式是怎么计算的？
:nth-child(an+b) 把非负整数 n 依次代入公式，命中的正整数就是元素在同辈中的序号。2n、2n+1 和 -n+3 分别适合偶数行、奇数行和前几项；表格斑马纹或列表强调效果要按所有元素兄弟的位置计算。
核心关键词CSS :nth-child an+b formula - 1167
only-child 和 only-of-type 分别在什么条件下匹配？
:only-child 要求目标元素没有任何元素兄弟，:only-of-type 只要求同标签兄弟不存在。混合标签排列时，两者可能给同一个节点不同结果；卡片容器只有一个子元素和段落中只有一个同类标题，适用的选择器也不同。
核心关键词CSS :only-child :only-of-type - 1168
遇到浏览器不支持的伪类或伪元素怎么降级处理？
浏览器不认识选择器中的伪类或伪元素时，整条普通选择器规则可能被丢弃，回退样式不应与新选择器绑在同一组中。@supports selector() 可检测支持情况，再逐步增强；私有前缀伪元素尤其需要单独规则。
核心关键词CSS 伪类 旧浏览器兼容 降级方案 - 1169
indeterminate 伪类什么时候生效？除了复选框还能用在哪？
:indeterminate 可匹配半选复选框、没有选中项的某些单选组和不确定进度条。复选框的半选状态通常由 JavaScript 设置，视觉状态不等于 checked 的提交值；全选控件显示半选时，还要单独处理实际选中逻辑。
核心关键词CSS :indeterminate pseudo-class checkbox - 1170
focus-within 伪类有什么用？和 focus 的区别是什么？
:focus-within 在元素本身或任意后代拥有焦点时匹配，适合高亮整个表单字段组或展开包含输入框的面板。它不会把焦点移到父元素；与 :focus 相比，触发范围更大，组件嵌套时需要注意样式向上联动。
核心关键词CSS :focus-within pseudo-class usability - 1171
required 和 optional 伪类怎么用？匹配哪些表单元素？
:required 匹配带 required 属性的表单控件，:optional 匹配不要求必填的控件，两者描述属性状态而不是用户当前输入是否有效。禁用控件也可能匹配必填规则；表单错误样式要把必填状态与 :invalid 等校验状态分开处理。
核心关键词CSS :required :optional input validation - 1172
target 伪类是怎么根据 URL 的 hash 来匹配元素的？
:target 匹配当前 URL 片段所指向的元素，例如 #intro 对应 id="intro" 的区块。目录跳转可据此高亮目标，纯 CSS 选项卡也能利用它；片段改变会即时切换匹配状态，目标不存在时则没有元素被选中。
核心关键词CSS :target pseudo-class URL hash - 1173
before 和 after 伪元素的 content 属性能设置哪些值？
::before 和 ::after 生成的内容由 content 指定，可以是文字、计数器、属性值或空字符串；没有有效的 content 通常不会产生伪元素盒子。它们适合装饰标记、编号等视觉内容，关键信息和交互内容仍应放在真实 DOM 中。
核心关键词CSS ::before ::after content property - 1174
selection 伪元素能自定义哪些样式？有哪些限制？
::selection 只能设置少数与选中文本相关的样式，例如文字颜色与背景色，不能像普通元素那样随意改布局。高对比度主题下还要保证选中文字可读；不同浏览器对可用属性与继承细节可能有差异。
核心关键词CSS ::selection pseudo-element restrictions - 1175
in-range 和 out-of-range 伪类适用于哪些控件？
:in-range 和 :out-of-range 只对支持范围约束的输入类型有意义，按 min、max 与当前值决定匹配结果。它们描述是否越界，不等于整个控件的 :valid 或 :invalid 状态；必填、格式错误等其他约束仍要另行判断。
核心关键词CSS :in-range pseudo-class input range - 1176
伪类和伪元素有什么区别？冒号怎么写？
:hover、:focus 等伪类匹配现有元素的状态，::before、::selection 等伪元素则选中元素的一部分或生成内容。单冒号的旧版伪元素写法为兼容保留，新增代码通常用双冒号；状态选择与生成内容可以组合，但语义不能互相替代。
核心关键词CSS pseudo-class vs pseudo-element selectors - 1177
revert 用在可继承属性上，值会回到父元素的继承值还是浏览器默认值？
revert 会把属性回退到上一个来源的值。对可继承属性来说，作者样式被撤销后，浏览器默认样式通常没有设置该属性，于是走正常继承、拿到父元素的值。但如果浏览器默认样式里显式设了值，结果会不一样。
核心关键词CSS revert inherited property reset - 1178
revert 和 revert-layer 有什么区别？分别在什么场景用？
revert 回退当前样式来源，在作者样式中会改用用户样式或浏览器默认值；revert-layer 回退当前层叠层，让较低优先级的层重新参与竞争。结合分层组件样式说明两者的适用场景，以及没有其他层可回退时的结果。
核心关键词CSS revert vs revert-layer - 1179
@scope 和 Shadow DOM 都能隔离样式，能互相替代吗？
@scope 限制选择器的匹配范围，但外部样式仍然能穿透进来。Shadow DOM 建立真正的样式边界，内外互不影响。两者解决不同层次的问题，不能互相替代，但可以在 Shadow DOM 内部配合使用。
核心关键词CSS @scope vs Shadow DOM - 1180
CSS 的 @scope 规则怎么用？它在层叠中是什么位置？
@scope 让样式只在指定的 DOM 子树内生效，还能用 to() 设下界排除嵌套区域。它不改变选择器优先级，但在优先级相同时，离作用域根更近的规则胜出。适合组件级样式命名空间，不需要编译工具。
核心关键词CSS @scope rule cascade - 1181
@scope 的 to() 下界怎么用？和 :scope 伪类有什么区别？
@scope 的 to() 设置下界，排除指定子树不受作用域样式影响，适合防止嵌套组件被穿透。:scope 伪类指代作用域根元素本身，用于给根元素加样式或在选择器里引用根。两者功能完全不同。
核心关键词CSS @scope lower bound :scope - 1182
选择器 ul#nav li.active a:hover 的优先级是多少？
选择器 ul#nav li.active a:hover 的优先级按 ID、类或伪类、元素三列计数，而不是把所有命中项简单加总。遇到 :is()、:where() 或内联样式时还有特殊规则；比较冲突声明前也要确认它们处于同一来源与层。
核心关键词CSS specificity 优先级计算 示例 - 1183
两个相同优先级的规则发生冲突时，CSS 如何决定最终采用哪一条？
两条选择器规则只有在来源、重要性、层和优先级都相同时，书写顺序才决定谁胜出。引入 @layer 后，层的先后可压过层内较高的选择器优先级；覆盖第三方库样式时，应先看规则所在层，再排查构建后的实际顺序。
核心关键词CSS cascade equal specificity order - 1184
为什么一个 ID 选择器就能赢过好几个类选择器？
CSS 优先级按 ID、类、元素三列从左到右比较，ID 列有值就直接赢过类列，不看数量。讲解三列计算规则、为什么多个类拼不过一个 ID，以及实际项目中避免 ID 优先级过高的常用手段。
核心关键词CSS ID vs class specificity - 1185
内联样式和 !important 的优先级到底是怎么算的？
HTML 的 style 属性通常比普通选择器声明更靠前，但 !important 会改变级联比较的层级。内联重要声明、用户样式与层叠层仍有明确顺序；组件样式覆盖失败时，要先确认声明来源与重要性，再比较选择器权重。
核心关键词CSS 优先级 内联样式 !important 计算 - 1186
:not() 自己有优先级吗？加了它选择器权重会变高吗？
:not() 自身不增加优先级，参数中最高优先级的选择器会计入结果；:is()、:has() 也按类似方式处理，:where() 则始终为零。多个参数或嵌套伪类时，需要按实际选择器结构计算，不能只数冒号个数。
核心关键词CSS :not() specificity calculation - 1187
:enabled 和 :disabled 能作用于哪些元素？给链接加 disabled 有效吗？
:enabled 和 :disabled 只能选中可禁用的表单控件，对链接无效。这里说明哪些元素能被禁用、fieldset 禁用后对后代控件的影响，以及为什么仅写 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() 里写多个备用值能逐个回退吗？
CSS 变量的 var() 函数只接受一个可选备用值，多个逗号分隔的值不会逐个回退而是合并成整体。搞清回退触发条件、嵌套写法和无效值陷阱，主题系统的变量就不会踩坑。
核心关键词CSS var() fallback value cascade - 1190
动画暂停期间修改了 @keyframes，恢复播放后表现会变吗？
暂停动画后改动同名关键帧，不会自动重启动画，但当前进度处的计算结果可能立即变化。区分冻结时间与冻结画面、修改关键帧与更换动画名，并给出用浏览器开发工具观察位置跳变的方法。
核心关键词CSS animation-play-state 暂停时修改关键帧 - 1191
animation-direction 的 alternate 和 reverse 有什么区别？
animation-direction 控制关键帧的播放方向。reverse 每轮倒着播，alternate 奇偶轮交替方向。搞清四种取值和缓动曲线反转的关系，动画方向就不会搞反。
核心关键词CSS animation-direction alternate 与 reverse 区别 - 1192
animationstart、animationend、animationiteration 这三个事件分别在什么时候触发？
animationstart、animationiteration 与 animationend 分别对应动画开始、新一轮循环和正常结束。正延迟会推迟开始事件，循环动画每轮未必都触发结束事件；动画被取消时还要考虑 animationcancel，监听逻辑不能只等最后一帧。
核心关键词CSS animationstart animationend animationiteration 触发时机 - 1193
animation-fill-mode 设成 backwards 和 both 有什么区别？
animation-fill-mode: backwards 会让元素在正延迟期间采用起始关键帧样式，动画结束后回到原样；both 同时具备 backwards 与 forwards 的效果。负延迟、动画方向和实际第一帧会改变视觉结果，不能简单把它理解成“永远显示 0% 帧”。
核心关键词CSS animation-fill-mode backwards 与 both 区别 - 1194
怎么让无限循环的动画在每两轮之间有一段停顿？
animation-delay 只发生在第一轮开始前，循环之间不会自动空出间隔。需要周期性停顿时，可把动作集中在关键帧前半段，让后半段保持同一状态；若停顿时长需动态变化，则适合用脚本控制播放状态。
核心关键词CSS animation 无限循环 每次循环加延迟 - 1195
@keyframes 里 from 和 to 跟百分比选择器是什么关系？
关键帧中的 from 与 to 分别对应 0% 和 100%，中间可用任意百分比指定状态；端点缺失时，浏览器会依据元素的基础样式补齐。多个同名 @keyframes 规则的覆盖与同规则里重复百分比的合并不同，动画结果要分开判断。
核心关键词CSS keyframes 百分比 from to 对应关系 - 1196
animation-play-state 暂停和负 animation-delay 跳过有什么区别？
paused 把动画冻结在当前帧，随时可以恢复继续播。负 delay 让动画跳过开头一段直接从中间开始，跳过的部分不会再播。两者对动画的影响完全不同，一个是暂停，一个是快进。
核心关键词CSS animation-play-state 与负 animation-delay 区别 - 1197
怎么用纯 CSS 让动画跟着滚动条走，而不是按时间播放？
用 animation-timeline 把动画和滚动位置绑在一起，滚到哪动画就播到哪。讲解 scroll() 和 view() 两种时间线的区别、写法，以及浏览器兼容和常见坑。
核心关键词CSS scroll-timeline 滚动驱动动画 - 1198
backdrop-filter 和 filter 有什么区别？毛玻璃效果怎么实现？
filter 模糊元素自身，backdrop-filter 模糊元素背后的内容。讲解毛玻璃效果的写法、背景为何要留出透明度、模糊范围与性能开销，以及旧浏览器不支持时的降级方案。
核心关键词CSS backdrop-filter 与 filter 区别 - 1199
做 3D 卡片翻转效果时，backface-visibility 解决的是什么问题？
卡片翻转 180 度后背面会透出正面的镜像内容，backface-visibility: hidden 就是把背面藏起来。讲解 3D 卡片翻转的完整结构、父容器的 perspective 设置，以及常踩的坑。
核心关键词CSS backface-visibility 卡片翻转 - 1200
什么情况下元素会被提升为独立合成层？will-change 怎么用才对？
3D 变换、will-change、固定定位等都会触发合成层提升。讲解合成层的原理、will-change 的正确用法和常见的滥用问题，以及怎么在 DevTools 里检查层数。
核心关键词CSS will-change 合成层 创建条件