使用 all: unset 或 all: revert 会重置哪些属性？对继承属性有何影响？
围绕“使用 all: unset 或 all: revert 会重置哪些属性？对继承属性有何影响”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 all 快捷重置所有属性，unset 会恢复为继承值或初始值，revert 回退到用户代理。
核心关键词CSS all property unset revert
面试知识索引 · 分类、标签与搜索
CSS · 层叠与选择器面试题，43 道完整答案
CSS · 层叠与选择器面试题第 1 页，显示第 1–43 题，共找到 43 道完整解析，可继续按分类、标签与关键词缩小范围。
43筛选结果
52技术分类
178检索标签
1索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
第 1 页
本页面试问题
按稳定语义路径排序
- 0001
- 0002
可否在 @media 内定义 @layer？如果可以，其作用域如何影响层叠？
围绕“可否在 @media 内定义 @layer？如果可以，其作用域如何影响层叠”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确可以，但会影响条件规则，但普遍浏览器支持？需要说明浏览器版本，不深入其他 at-rules。
核心关键词CSS @layer inside @media rules - 0003
自定义属性在继承方面有哪些特殊性？例如，它们默认是否继承？
本文解释自定义属性（CSS变量）的继承行为：默认可继承、可被后代覆盖、并说明 initial 和 unset 的影响，与普通属性对比。
核心关键词CSS custom property inheritance behavior - 0004
如何让自定义属性参与过渡动画？需要满足哪些条件？
围绕“如何让自定义属性参与过渡动画？需要满足哪些条件”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明需要注册属性（如@property）并指定初始值，或值类型已知，且过渡代理，不深入到注册方式细节。
核心关键词CSS custom property transition animation - 0005
仅设置自定义属性为无效值时，例如 color: var(--x) 但 --x 不是合法颜色，最终效果如何？
围绕“仅设置自定义属性为无效值时，例如 color: var(--x) 但 --x 不是合法颜色，最终效果如何”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要区分自定义属性继承有效但使用该值的属性变为无效，可能回落继承或 initial。
核心关键词CSS custom property invalid at computed-value time - 0006
CSS 自定义属性的作用域如何限定到特定组件？有哪些推荐模式？
围绕“CSS 自定义属性的作用域如何限定到特定组件？有哪些推荐模式”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需提出利用后代选择器或作用域伪类，但避免污染全局，同时不深入 Shadow DOM 细节。
核心关键词CSS 自定义属性 组件作用域 实践 - 0007
动态伪类 :hover 和 :focus 在使用时有哪些注意事项？例如触屏设备上的行为。
围绕“动态伪类 :hover 和 :focus 在使用时有哪些注意事项？例如触屏设备上的行为”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需提及鼠标悬停和键盘焦点，以及 :focus-visible 的差别。
核心关键词CSS :hover :focus dynamic pseudo-class - 0008
::first-line 伪元素能对哪些类型的元素生效？为什么对块级和行内元素会有差异？
围绕“::first-line 伪元素能对哪些类型的元素生效？为什么对块级和行内元素会有差异”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需指出只对块容器内第一行有效，但 flex 和 grid 容器中不起作用，说明理由。
核心关键词CSS ::first-line pseudo-element applicability - 0009
:has() 伪类为什么被称为“父选择器”？它的引入对 CSS 选择器有哪些影响？
围绕“:has() 伪类为什么被称为“父选择器”？它的引入对 CSS 选择器有哪些影响”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释能选择包含某子元素的元素，以及性能注意。
核心关键词CSS :has() relational pseudo-class - 0010
当同时存在带 !important 和不带 !important 的规则时，默认的层叠优先级顺序是什么？
CSS !important 优先级怎么排？解释普通与重要声明的来源顺序、@layer 反转规则、内联样式和动画过渡的边界，并用可运行 HTML 示例定位样式冲突。
核心关键词CSS !important cascade precedence order - 0011
请比较 inherit、initial、unset 在可继承和不可继承属性上的表现有何不同？
本文通过对比 inherit、initial、unset 在可继承与不可继承属性上的差异，解释 unset 的动态等价规则，并给出工程场景与边界。
核心关键词CSS inherit initial unset inheritance - 0012
在实战中，何时适宜用 inherit 关键字来强制子元素继承父属性？
围绕“在实战中，何时适宜用 inherit 关键字来强制子元素继承父属性”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需举例说明如按钮重置字体颜色，但不应滥用。
核心关键词CSS inherit 关键字 实际使用场景 - 0013
当父元素定义了某个可继承属性，子元素自身也有相同属性时，如何判定子元素的最终值？
围绕“当父元素定义了某个可继承属性，子元素自身也有相同属性时，如何判定子元素的最终值”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明子元素自身规则（哪怕优先级低）优先于继承值，且若无自身规则，继承值参与层叠。
核心关键词CSS 继承属性 子元素覆盖 最终值 - 0014
:is() 和 :where() 在优先级上有何关键差异？它们适合在哪些场景使用？
围绕“:is() 和 :where() 在优先级上有何关键差异？它们适合在哪些场景使用”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需明确 :is() 取最高优先级，:where() 为零，并给出示例。
核心关键词CSS :is() vs :where() specificity - 0015
当未使用 @layer 的全局样式与 @layer 中的样式冲突时，谁优先级更高？
围绕“当未使用 @layer 的全局样式与 @layer 中的样式冲突时，谁优先级更高”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明未分层的样式优先级高于任何分层样式，除非分层中带 !important。
核心关键词CSS unlayered styles override layered - 0016
请解释 @layer 的作用，并简要说明如何定义层叠层以及默认顺序的影响。
围绕“请解释 @layer 的作用，并简要说明如何定义层叠层以及默认顺序的影响”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 @layer 可以分组规则并控制优先级，未指定顺序时按出现顺序，但常用顺序需指定。
核心关键词CSS @layer cascade layer - 0017
在带 !important 时，层叠层的优先级顺序会如何反转？
围绕“在带 !important 时，层叠层的优先级顺序会如何反转”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明正常情况下靠后的层优先，但带 !important 时靠前的层优先，这是常见的误区。
核心关键词CSS cascade layer !important reverse order - 0018
假设存在多个 @layer 语句，各层多次出现时其最终顺序如何确定？
围绕“假设存在多个 @layer 语句，各层多次出现时其最终顺序如何确定”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明浏览器按第一次出现的顺序确定，后续语句只追加规则。
核心关键词CSS @layer multiple statements order - 0019
如果两个规则来自不同层叠层但优先级相同，决定胜负的是层顺序还是层内顺序？
围绕“如果两个规则来自不同层叠层但优先级相同，决定胜负的是层顺序还是层内顺序”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释外层顺序优先于内层规则顺序，且未分层规则视为在最后。
核心关键词CSS cascade layer priority order - 0020
: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 - 0021
:only-child 和 :only-of-type 的选择条件是什么？它们与其它结构伪类有何关联？
围绕“:only-child 和 :only-of-type 的选择条件是什么？它们与其它结构伪类有何关联”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明它们判断是否唯一的子元素或类型，但不要求必须与兄弟比较，扩展到与 first-child 的比较。
核心关键词CSS :only-child :only-of-type - 0022
如需兼容旧浏览器，在书写伪类时应采用哪些实践，例如添加前缀或降级方案？
围绕“如需兼容旧浏览器，在书写伪类时应采用哪些实践，例如添加前缀或降级方案”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需举具体伪类如 :focus-within 的 @supports 降级。
核心关键词CSS 伪类 旧浏览器兼容 降级方案 - 0023
:indeterminate 伪类可用于哪些元素？比如复选框尚无选中状态时。
围绕“:indeterminate 伪类可用于哪些元素？比如复选框尚无选中状态时”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明用于 checkbox 通过 JS 设置，也可能用于 radio 组无预选。
核心关键词CSS :indeterminate pseudo-class checkbox - 0024
:focus-within 伪类对哪些场景很有用？它和 :focus 的继承关系如何？
围绕“:focus-within 伪类对哪些场景很有用？它和 :focus 的继承关系如何”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释当子元素获得焦点时父元素匹配，用于表单高亮。
核心关键词CSS :focus-within pseudo-class usability - 0025
:required 与 :optional 伪类是如何对应输入框属性的？请结合实际表单验证场景。
围绕“:required 与 :optional 伪类是如何对应输入框属性的？请结合实际表单验证场景”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释它们根据 required 属性，但不能直接判断有效/无效，可配合 :valid。
核心关键词CSS :required :optional input validation - 0026
:target 伪类是如何根据 URL 片段工作的？请举例说明其在导航中的应用。
围绕“:target 伪类是如何根据 URL 片段工作的？请举例说明其在导航中的应用”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明匹配 id 的元素，以及多个目标未定义的情况。
核心关键词CSS :target pseudo-class URL hash - 0027
::before 和 ::after 伪元素生成的内容是否影响元素的几何尺寸？其 content 属性可以设置哪些值？
围绕“::before 和 ::after 伪元素生成的内容是否影响元素的几何尺寸？其 content 属性可以设置哪些值”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明默认是行内级，伪元素也会参与布局，可设 text 和 attr()，但不允许设置嵌套伪元素。
核心关键词CSS ::before ::after content property - 0028
::selection 伪元素可以自定义哪些样式？它对哪些属性有限制？
围绕“::selection 伪元素可以自定义哪些样式？它对哪些属性有限制”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需明确可以设 color、background 等，但限制如 display 无效，并提及有些属性不支持继承。
核心关键词CSS ::selection pseudo-element restrictions - 0029
:in-range 和 :out-of-range 伪类适用于哪些控件？如何设置范围并触发？
围绕“:in-range 和 :out-of-range 伪类适用于哪些控件？如何设置范围并触发”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕须提到可适用于 input[type=number] 或 range，需 min/max 属性。
核心关键词CSS :in-range pseudo-class input range - 0030
伪类（如 :hover）和伪元素（如 ::before）在选择器上的区别是什么？在书写时如何注意冒号？
围绕“伪类（如 :hover）和伪元素（如 ::before）在选择器上的区别是什么？在书写时如何注意冒号”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需明确分别、历史单冒号的原因以及主流写法，并举例说明，不深入全部伪类。
核心关键词CSS pseudo-class vs pseudo-element selectors - 0031
使用 revert 重置已继承的属性时，会恢复为父元素的继承值还是用户代理默认值？
围绕“使用 revert 重置已继承的属性时，会恢复为父元素的继承值还是用户代理默认值”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释 revert 在继承属性上会恢复为父元素计算值，若父元素未设则为浏览器默认。
核心关键词CSS revert inherited property reset - 0032
revert 和 revert-layer 关键字在层叠中分别有什么作用？主要区别是什么？
围绕“revert 和 revert-layer 关键字在层叠中分别有什么作用？主要区别是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 revert 回退到用户代理样式，revert-layer 回退到上一层叠层的样式，并给出使用场景，不深入所有级联来源。
核心关键词CSS revert vs revert-layer - 0033
@scope 与 Shadow DOM 的样式隔离有何关系？可以替代吗？
围绕“@scope 与 Shadow DOM 的样式隔离有何关系？可以替代吗”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 @scope 是作用域，但不能替代 shadow DOM 的隔离机制，属于两个维度，不深入 Shadow DOM 部分。
核心关键词CSS @scope vs Shadow DOM - 0034
@scope 规则在 CSS 中的作用是什么？如何定义作用域限制？
围绕“@scope 规则在 CSS 中的作用是什么？如何定义作用域限制”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释 @scope 能让样式限定在 DOM 子树内，影响优先级，但注意浏览器兼容性，不深入 to() 语法细节。
核心关键词CSS @scope rule cascade - 0035
@scope 中的 lower bound（to）有何用途？与 :scope 伪类有何区别？
围绕“@scope 中的 lower bound（to）有何用途？与 :scope 伪类有何区别”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 lower bound 可以终止作用域范围，:scope 指匹配元素本身。
核心关键词CSS @scope lower bound :scope - 0036
对于选择器「ul#nav li.active a:hover」，其优先级各组成部分的数值是多少？
解释如何计算 ul#nav li.active a:hover 的优先级：ID、类、伪类、元素数量，明确伪类算类级别，最终结果为 1-2-3。
核心关键词CSS specificity 优先级计算 示例 - 0037
两个相同优先级的规则发生冲突时，CSS 如何决定最终采用哪一条？
本题给出同优先级规则冲突的判定结论：同层同源时后写的规则胜出；引入层叠层 @layer 后层顺序优先于层内来源顺序，并说明无层样式的默认位置与判断步骤。
核心关键词CSS cascade equal specificity order - 0038
为什么通常说 ID 选择器的优先级高于类选择器？请依据优先级计算规则说明。
本文依据 CSS 优先级计算规则，解释为何 ID 选择器（1-0-0）在数值上始终高于类选择器（0-1-0），并说明少用 ID 的工程原因，兼顾讨论 !important 带来的影响。
核心关键词CSS ID vs class specificity - 0039
在 CSS 中，内联样式和 !important 是如何参与优先级计算的？
围绕“在 CSS 中，内联样式和 !important 是如何参与优先级计算的”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释内联样式与 !important 在优先级中的覆盖关系及与选择器优先级的区别。
核心关键词CSS 优先级 内联样式 !important 计算 - 0040
:not() 伪类的优先级是如何计算的？与普通选择器有何不同？
围绕“:not() 伪类的优先级是如何计算的？与普通选择器有何不同”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 :not() 会使优先级为参数中选择器的最高优先级，且列表可多个。
核心关键词CSS :not() specificity calculation - 0041
:enabled 和 :disabled 伪类能适用于哪些元素？如果对链接使用会怎样？
围绕“:enabled 和 :disabled 伪类能适用于哪些元素？如果对链接使用会怎样”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明它们主要针对表单控件，链接不能用。
核心关键词CSS :enabled :disabled form elements - 0042
:first-child 与 :first-of-type 在选择元素上有什么本质区别？
围绕“:first-child 与 :first-of-type 在选择元素上有什么本质区别”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需通过例子说明是兄弟上的第一个还是同一类型的第一个，并提示各自适用的场景。
核心关键词CSS :first-child vs :first-of-type - 0043
在 var() 函数中提供多个备用值是否有效？如果可以，其回退机制是怎样的？
本文解析 var() 的语法限制：仅支持一个 fallback，多值会被当作整体。并说明回退触发条件、无效值处理及工程场景中的误用后果。
核心关键词CSS var() fallback value cascade