本文深入剖析一个常见 CSS 误区：为何为 #outer-box 设置 background-color: purple 后，页面并未显示紫色背景，反而看似“只出现紫色边框”——根本原因在于子元素的蓝色背景完全覆盖了父容器的背景区域，而非优先级失效。
本文深入剖析一个常见
css
误区：为何为 `#outer-box` 设置 `background-color: purple` 后，页面并未显示紫色背景，反而看似“只出现紫色边框”——根本原因在于子元素的蓝色背景完全覆盖了父容器的背景区域，而非优先级失效。
在 CSS 级联（Cascading）与层叠上下文（Stacking Context）中，选择器优先级（Specificity）确实决定了
同级、同元素、同属性
的样式冲突如何解决。ID 选择器（如 #outer-box）的优先级（0,1,0,0）确实高于类选择器（如 .box，优先级 0,0,1,0）。但关键前提在于：
该样式必须实际作用于目标元素的可见区域
。
在你的 HTML 结构中：
虽然
Yellow Text
White Text
同时匹配 .box（blue）和 #outer-box（purple），
CSS 引擎会正确应用 purple 作为其 background-color
。问题在于：这个外层 div 的内容高度几乎完全被内部两个 .box 元素填满，而这两个子元素自身具有 background-color: blue 且无透明度，因此它们像“蓝色图层”一样严丝合缝地遮盖了父容器的紫色背景区域。
你所看到的“紫色边框”，其实是 #outer-box 在 padding 区域（10px）或未被子元素覆盖的极小缝隙中透出的紫色背景——并非真正的边框（border），而是父容器背景的
唯一可见部分
。
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
✅ 验证方法：向 #outer-box 内添加一个
无任何背景样式的普通子元素
，即可直观确认紫色背景已生效：
此时，新增
这是纯文本容器，背景透明 → 你将看到下方的紫色！
Yellow Text
White Text
Yellow Text
White Text
因无 background-color 声明，默认为 transparent，其区域将完整显示 #outer-box 的紫色背景。
? 进阶建议：
若需让父背景“透出”，可对子元素设置 background-color: rgba(0, 0, 255, 0.8)（半透明蓝）；
或使用 z-index + position 构建明确的层叠顺序（注意：z-index 仅对定位元素生效）；
检查是否意外设置了 overflow: hidden 或子元素 margin 折叠导致视觉错觉。
? 总结：
CSS 优先级规则完全正确且正常工作；所谓“背景未生效”，实为
布局遮盖（occlusion）
导致的视觉假象。理解 DOM 元素的盒模型（Box Model）、堆叠上下文及背景渲染层级，比单纯记忆优先级数字更为重要。调试时，善用浏览器开发者工具（Elements → Styles 面板确认样式已应用；Computed 面板查看最终生效值；Layout 面板观察盒模型尺寸与重叠关系）是定位此类问题的关键。