子元素自己写了样式，父元素的继承值还会生效吗？
继承值只在子元素没有该属性的直接声明时才使用，通配符 * 命中的低权重声明也能覆盖继承。inherit 和 unset 作为显式声明仍要参与正常级联；开发者工具里分清“本元素声明”与“从父元素继承”，才容易定位颜色或字体来源。
核心关键词CSS 继承属性 子元素覆盖 最终值
面试知识索引 · 分类、标签与搜索
CSS面试题，240 道完整答案
CSS面试题第 2 页，显示第 51–100 题，共找到 240 道完整解析，可继续按分类、标签与关键词缩小范围。
240筛选结果
52技术分类
178检索标签
5索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
第 2 页
本页面试问题
按稳定语义路径排序
- 0051
- 0052
is() 和 where() 在优先级上有什么区别？
:is() 和 :where() 都能合并多组选择器，但 :is() 采用参数中最高的优先级，:where() 始终为零。组件选择器简化时，两者可能匹配完全相同元素却产生不同覆盖结果；需要易于覆盖的基础样式更适合 :where()。
核心关键词CSS :is() vs :where() specificity - 0053
没放进 @layer 的样式和层里的样式冲突，谁赢？
未分层样式的优先级高于所有命名层，不管选择器权重。理解这条规则才能正确利用 @layer 管理第三方库样式，也能避免迁移过程中的优先级意外。会用普通声明和 important 声明分别比较，避免把两种顺序混为一谈。
核心关键词CSS unlayered styles override layered - 0054
@layer 是干什么用的？层的声明顺序怎么影响样式优先级？
@layer 把样式分组成层，层的优先级由声明顺序决定，越靠后优先级越高。掌握层叠层的声明方式和排序规则，解决第三方样式覆盖和大型项目样式冲突问题。还会说明层名首次出现的位置为何决定后续重复声明的排序。
核心关键词CSS @layer cascade layer - 0055
加了 !important 之后，层叠层的优先级顺序为什么会反转？
普通样式里后声明的层赢，加 !important 后变成先声明的层赢。理解这个反转规则，才能正确使用层叠层管理第三方库的 !important 样式。并说明未分层的 important 声明在层叠顺序中处于什么位置。
核心关键词CSS cascade layer !important reverse order - 0056
同一个层被多次打开，最终的优先级顺序怎么确定？
同一个 @layer 出现多次时，层的优先级以第一次出现为准，后续只追加规则不改变顺序。掌握预声明、多次打开、嵌套层的排序规则，避免样式优先级混乱。通过多文件重复打开同一命名层的例子，说明它不是新建一层。
核心关键词CSS @layer multiple statements order - 0057
两条规则来自不同层，优先级看层的顺序还是选择器权重？
不同层的规则冲突时，层的声明顺序优先于选择器权重和源码顺序。弄清层间比较的规则，理解为什么高权重选择器会输给低权重选择器。通过跨层冲突说明何时才轮到选择器权重和源码顺序比较。
核心关键词CSS cascade layer priority order - 0058
nth-child 的 an+b 公式是怎么计算的？
:nth-child(an+b) 把非负整数 n 依次代入公式，命中的正整数就是元素在同辈中的序号。2n、2n+1 和 -n+3 分别适合偶数行、奇数行和前几项；表格斑马纹或列表强调效果要按所有元素兄弟的位置计算。
核心关键词CSS :nth-child an+b formula - 0059
only-child 和 only-of-type 分别在什么条件下匹配？
:only-child 要求目标元素没有任何元素兄弟，:only-of-type 只要求同标签兄弟不存在。混合标签排列时，两者可能给同一个节点不同结果；卡片容器只有一个子元素和段落中只有一个同类标题，适用的选择器也不同。
核心关键词CSS :only-child :only-of-type - 0060
遇到浏览器不支持的伪类或伪元素怎么降级处理？
浏览器不认识选择器中的伪类或伪元素时，整条普通选择器规则可能被丢弃，回退样式不应与新选择器绑在同一组中。@supports selector() 可检测支持情况，再逐步增强；私有前缀伪元素尤其需要单独规则。
核心关键词CSS 伪类 旧浏览器兼容 降级方案 - 0061
indeterminate 伪类什么时候生效？除了复选框还能用在哪？
:indeterminate 可匹配半选复选框、没有选中项的某些单选组和不确定进度条。复选框的半选状态通常由 JavaScript 设置，视觉状态不等于 checked 的提交值；全选控件显示半选时，还要单独处理实际选中逻辑。
核心关键词CSS :indeterminate pseudo-class checkbox - 0062
focus-within 伪类有什么用？和 focus 的区别是什么？
:focus-within 在元素本身或任意后代拥有焦点时匹配，适合高亮整个表单字段组或展开包含输入框的面板。它不会把焦点移到父元素；与 :focus 相比，触发范围更大，组件嵌套时需要注意样式向上联动。
核心关键词CSS :focus-within pseudo-class usability - 0063
required 和 optional 伪类怎么用？匹配哪些表单元素？
:required 匹配带 required 属性的表单控件，:optional 匹配不要求必填的控件，两者描述属性状态而不是用户当前输入是否有效。禁用控件也可能匹配必填规则；表单错误样式要把必填状态与 :invalid 等校验状态分开处理。
核心关键词CSS :required :optional input validation - 0064
target 伪类是怎么根据 URL 的 hash 来匹配元素的？
:target 匹配当前 URL 片段所指向的元素，例如 #intro 对应 id="intro" 的区块。目录跳转可据此高亮目标，纯 CSS 选项卡也能利用它；片段改变会即时切换匹配状态，目标不存在时则没有元素被选中。
核心关键词CSS :target pseudo-class URL hash - 0065
before 和 after 伪元素的 content 属性能设置哪些值？
::before 和 ::after 生成的内容由 content 指定，可以是文字、计数器、属性值或空字符串；没有有效的 content 通常不会产生伪元素盒子。它们适合装饰标记、编号等视觉内容，关键信息和交互内容仍应放在真实 DOM 中。
核心关键词CSS ::before ::after content property - 0066
selection 伪元素能自定义哪些样式？有哪些限制？
::selection 只能设置少数与选中文本相关的样式，例如文字颜色与背景色，不能像普通元素那样随意改布局。高对比度主题下还要保证选中文字可读；不同浏览器对可用属性与继承细节可能有差异。
核心关键词CSS ::selection pseudo-element restrictions - 0067
in-range 和 out-of-range 伪类适用于哪些控件？
:in-range 和 :out-of-range 只对支持范围约束的输入类型有意义，按 min、max 与当前值决定匹配结果。它们描述是否越界，不等于整个控件的 :valid 或 :invalid 状态；必填、格式错误等其他约束仍要另行判断。
核心关键词CSS :in-range pseudo-class input range - 0068
伪类和伪元素有什么区别？冒号怎么写？
:hover、:focus 等伪类匹配现有元素的状态，::before、::selection 等伪元素则选中元素的一部分或生成内容。单冒号的旧版伪元素写法为兼容保留，新增代码通常用双冒号；状态选择与生成内容可以组合，但语义不能互相替代。
核心关键词CSS pseudo-class vs pseudo-element selectors - 0069
revert 用在可继承属性上，值会回到父元素的继承值还是浏览器默认值？
revert 会把属性回退到上一个来源的值。对可继承属性来说，作者样式被撤销后，浏览器默认样式通常没有设置该属性，于是走正常继承、拿到父元素的值。但如果浏览器默认样式里显式设了值，结果会不一样。
核心关键词CSS revert inherited property reset - 0070
revert 和 revert-layer 有什么区别？分别在什么场景用？
revert 回退当前样式来源，在作者样式中会改用用户样式或浏览器默认值；revert-layer 回退当前层叠层，让较低优先级的层重新参与竞争。结合分层组件样式说明两者的适用场景，以及没有其他层可回退时的结果。
核心关键词CSS revert vs revert-layer - 0071
@scope 和 Shadow DOM 都能隔离样式，能互相替代吗？
@scope 限制选择器的匹配范围，但外部样式仍然能穿透进来。Shadow DOM 建立真正的样式边界，内外互不影响。两者解决不同层次的问题，不能互相替代，但可以在 Shadow DOM 内部配合使用。
核心关键词CSS @scope vs Shadow DOM - 0072
CSS 的 @scope 规则怎么用？它在层叠中是什么位置？
@scope 让样式只在指定的 DOM 子树内生效，还能用 to() 设下界排除嵌套区域。它不改变选择器优先级，但在优先级相同时，离作用域根更近的规则胜出。适合组件级样式命名空间，不需要编译工具。
核心关键词CSS @scope rule cascade - 0073
@scope 的 to() 下界怎么用？和 :scope 伪类有什么区别？
@scope 的 to() 设置下界，排除指定子树不受作用域样式影响，适合防止嵌套组件被穿透。:scope 伪类指代作用域根元素本身，用于给根元素加样式或在选择器里引用根。两者功能完全不同。
核心关键词CSS @scope lower bound :scope - 0074
选择器 ul#nav li.active a:hover 的优先级是多少？
选择器 ul#nav li.active a:hover 的优先级按 ID、类或伪类、元素三列计数，而不是把所有命中项简单加总。遇到 :is()、:where() 或内联样式时还有特殊规则；比较冲突声明前也要确认它们处于同一来源与层。
核心关键词CSS specificity 优先级计算 示例 - 0075
两个相同优先级的规则发生冲突时，CSS 如何决定最终采用哪一条？
两条选择器规则只有在来源、重要性、层和优先级都相同时，书写顺序才决定谁胜出。引入 @layer 后，层的先后可压过层内较高的选择器优先级；覆盖第三方库样式时，应先看规则所在层，再排查构建后的实际顺序。
核心关键词CSS cascade equal specificity order - 0076
为什么一个 ID 选择器就能赢过好几个类选择器？
CSS 优先级按 ID、类、元素三列从左到右比较，ID 列有值就直接赢过类列，不看数量。讲解三列计算规则、为什么多个类拼不过一个 ID，以及实际项目中避免 ID 优先级过高的常用手段。
核心关键词CSS ID vs class specificity - 0077
内联样式和 !important 的优先级到底是怎么算的？
HTML 的 style 属性通常比普通选择器声明更靠前，但 !important 会改变级联比较的层级。内联重要声明、用户样式与层叠层仍有明确顺序；组件样式覆盖失败时，要先确认声明来源与重要性，再比较选择器权重。
核心关键词CSS 优先级 内联样式 !important 计算 - 0078
:not() 自己有优先级吗？加了它选择器权重会变高吗？
:not() 自身不增加优先级，参数中最高优先级的选择器会计入结果；:is()、:has() 也按类似方式处理，:where() 则始终为零。多个参数或嵌套伪类时，需要按实际选择器结构计算，不能只数冒号个数。
核心关键词CSS :not() specificity calculation - 0079
:enabled 和 :disabled 能作用于哪些元素？给链接加 disabled 有效吗？
:enabled 和 :disabled 只能选中可禁用的表单控件，对链接无效。这里说明哪些元素能被禁用、fieldset 禁用后对后代控件的影响，以及为什么仅写 disabled 属性未必能代表实际状态。
核心关键词CSS :enabled :disabled form elements - 0080
:first-child 和 :first-of-type 选中的元素有什么不同？
:first-child 看目标是不是父元素的第一个元素子节点，:first-of-type 则只在同标签兄弟里排位。前面插入一个不同标签时，后者仍可能匹配，前者会失效；给选择器加上标签名也不会改变这些伪类各自的计数范围。
核心关键词CSS :first-child vs :first-of-type - 0081
var() 里写多个备用值能逐个回退吗？
CSS 变量的 var() 函数只接受一个可选备用值，多个逗号分隔的值不会逐个回退而是合并成整体。搞清回退触发条件、嵌套写法和无效值陷阱，主题系统的变量就不会踩坑。
核心关键词CSS var() fallback value cascade - 0082
动画暂停期间修改了 @keyframes，恢复播放后表现会变吗？
暂停动画后改动同名关键帧，不会自动重启动画，但当前进度处的计算结果可能立即变化。区分冻结时间与冻结画面、修改关键帧与更换动画名，并给出用浏览器开发工具观察位置跳变的方法。
核心关键词CSS animation-play-state 暂停时修改关键帧 - 0083
animation-direction 的 alternate 和 reverse 有什么区别？
animation-direction 控制关键帧的播放方向。reverse 每轮倒着播，alternate 奇偶轮交替方向。搞清四种取值和缓动曲线反转的关系，动画方向就不会搞反。
核心关键词CSS animation-direction alternate 与 reverse 区别 - 0084
animationstart、animationend、animationiteration 这三个事件分别在什么时候触发？
animationstart、animationiteration 与 animationend 分别对应动画开始、新一轮循环和正常结束。正延迟会推迟开始事件，循环动画每轮未必都触发结束事件；动画被取消时还要考虑 animationcancel，监听逻辑不能只等最后一帧。
核心关键词CSS animationstart animationend animationiteration 触发时机 - 0085
animation-fill-mode 设成 backwards 和 both 有什么区别？
animation-fill-mode: backwards 会让元素在正延迟期间采用起始关键帧样式，动画结束后回到原样；both 同时具备 backwards 与 forwards 的效果。负延迟、动画方向和实际第一帧会改变视觉结果，不能简单把它理解成“永远显示 0% 帧”。
核心关键词CSS animation-fill-mode backwards 与 both 区别 - 0086
怎么让无限循环的动画在每两轮之间有一段停顿？
animation-delay 只发生在第一轮开始前，循环之间不会自动空出间隔。需要周期性停顿时，可把动作集中在关键帧前半段，让后半段保持同一状态；若停顿时长需动态变化，则适合用脚本控制播放状态。
核心关键词CSS animation 无限循环 每次循环加延迟 - 0087
@keyframes 里 from 和 to 跟百分比选择器是什么关系？
关键帧中的 from 与 to 分别对应 0% 和 100%，中间可用任意百分比指定状态；端点缺失时，浏览器会依据元素的基础样式补齐。多个同名 @keyframes 规则的覆盖与同规则里重复百分比的合并不同，动画结果要分开判断。
核心关键词CSS keyframes 百分比 from to 对应关系 - 0088
animation-play-state 暂停和负 animation-delay 跳过有什么区别？
paused 把动画冻结在当前帧，随时可以恢复继续播。负 delay 让动画跳过开头一段直接从中间开始，跳过的部分不会再播。两者对动画的影响完全不同，一个是暂停，一个是快进。
核心关键词CSS animation-play-state 与负 animation-delay 区别 - 0089
怎么用纯 CSS 让动画跟着滚动条走，而不是按时间播放？
用 animation-timeline 把动画和滚动位置绑在一起，滚到哪动画就播到哪。讲解 scroll() 和 view() 两种时间线的区别、写法，以及浏览器兼容和常见坑。
核心关键词CSS scroll-timeline 滚动驱动动画 - 0090
backdrop-filter 和 filter 有什么区别？毛玻璃效果怎么实现？
filter 模糊元素自身，backdrop-filter 模糊元素背后的内容。讲解毛玻璃效果的写法、背景为何要留出透明度、模糊范围与性能开销，以及旧浏览器不支持时的降级方案。
核心关键词CSS backdrop-filter 与 filter 区别 - 0091
做 3D 卡片翻转效果时，backface-visibility 解决的是什么问题？
卡片翻转 180 度后背面会透出正面的镜像内容，backface-visibility: hidden 就是把背面藏起来。讲解 3D 卡片翻转的完整结构、父容器的 perspective 设置，以及常踩的坑。
核心关键词CSS backface-visibility 卡片翻转 - 0092
什么情况下元素会被提升为独立合成层？will-change 怎么用才对？
3D 变换、will-change、固定定位等都会触发合成层提升。讲解合成层的原理、will-change 的正确用法和常见的滥用问题，以及怎么在 DevTools 里检查层数。
核心关键词CSS will-change 合成层 创建条件 - 0093
conic-gradient 和 repeating-conic-gradient 有什么区别？怎么用它们画饼图？
conic-gradient 沿圆心扫一圈画完，repeating-conic-gradient 自动重复填满 360 度。讲解用锥形渐变画饼图的写法、色块硬边技巧、与径向渐变的区别，以及常见的角度换算错误。
核心关键词CSS conic-gradient 与 repeating-conic-gradient 区别 - 0094
CSS 动画里频繁改自定义属性，为什么会卡？
CSS 自定义属性在动画中频繁修改会触发样式重算和布局回流，导致掉帧。了解浏览器对自定义属性和原生属性的处理差异，掌握用 @property 注册后走合成层的优化方案。
核心关键词CSS 动画中修改自定义属性 性能问题 - 0095
用 transition 做 grayscale() 的去色动画，性能上要注意什么？
给图片加 filter: grayscale() 后用 transition 平滑去色的写法很简单，但 filter 过渡每帧都要重新计算像素，图片大或数量多时容易掉帧。了解 will-change 提升合成层和限制作用域的优化手段。
核心关键词CSS filter grayscale 过渡动画 性能 - 0096
filter 不是继承属性，为什么子元素也跟着模糊了？
filter 在 CSS 规范里是非继承属性，子元素不会自动获得父元素的 filter 值。但父元素的 filter 作用于整个渲染结果，子元素作为其中一部分自然受影响。搞清渲染时机和继承的区别，才能正确给子元素做豁免。
核心关键词CSS filter 是否继承 子元素视觉影响 - 0097
给父元素加了 filter，子元素的 fixed 定位为什么失效了？
父元素设了 filter 后会创建新的层叠上下文，同时改变 fixed 定位子元素的包含块。子元素不再相对于视口定位，而是相对于带 filter 的父元素。了解哪些属性会产生同样的副作用，以及实际项目中的解决方案。
核心关键词CSS filter 层叠上下文 fixed 子元素影响 - 0098
linear-gradient 里 0deg 是朝上还是朝右？角度怎么影响渐变方向？
linear-gradient 的角度以元素正上方为 0deg，顺时针旋转。0deg 从下往上渐变，90deg 从左往右，180deg 从上往下。掌握角度和方向关键字的对应关系，能快速判断渐变走向。
核心关键词CSS linear-gradient 角度与渐变方向 - 0099
linear-gradient 里两个色标写在同一位置，为什么会出现硬边？
线性渐变会在相邻色标之间插值；两个不同颜色的色标落在同一位置时，插值区间消失，颜色会出现硬边。条纹背景和进度条分段可以用这个特点实现，色标顺序、百分比位置和透明色叠加则决定边界是否如预期。
核心关键词CSS 渐变色标同位置 硬边效果原理 - 0100
怎么用 conic-gradient 做一个圆环进度条？
conic-gradient 能沿角度分出扇形，配合圆角可形成饼图；中心再遮一层圆或使用 mask 就得到圆环进度。数值变化可驱动色标位置，边缘锯齿、超出范围和可访问文本仍要处理。
核心关键词CSS conic-gradient 圆环进度条