CSS嵌套场景下子类可覆盖父类颜色但无法覆盖其hover-opacity的问题咨询

两类属性的渲染逻辑差异 #

你观察到的两种表现，本质是color和opacity的渲染规则完全不同，不存在“父类样式覆盖子类样式”的优先级问题：

• 文字颜色表现完全符合常规CSS优先级规则
  color是文本绘制类的可继承属性，当子元素.y直接定义color: red时，这个声明是直接作用在.y元素自身上的，优先级高于从父元素.x继承来的color: blue，因此内部<p>标签的文字会取最近的、直接定义在自身父级上的红色值，完全符合子类样式覆盖父类继承值的预期。
• 透明度表现来自opacity的特殊渲染机制

  opacity不是普通的可继承文本属性，它的作用是给当前元素的整个渲染层创建一个独立的合成层级，对该层级下所有内容（包括所有子元素、后代文本）统一施加透明度掩码。
  当鼠标悬停在文字区域时，指针会同时命中<p>、.y、.x三个DOM节点，因此两个:hover状态其实是同时触发的：

  1. .x触发:hover后设置的opacity: 0.1，会把.x元素的整个渲染层转换为半透明状态，层下的所有内容都会被这个半透明掩码统一约束
  2. .y触发:hover后设置的opacity: 1，确实是直接作用在.y元素自身的样式上，但.y本身已经处在.x的半透明渲染层内部——相当于在一层已经做了半透明处理的玻璃下，再放一层不透明的纸，最终看到的效果依然是隔着半透明玻璃的状态，子元素自身设置的不透明参数，无法跳出父层的透明度掩码约束。

常见认知误区澄清 #

很多开发者会把opacity和color的继承逻辑混同，实际上二者的边界非常清晰：

• color的传递规则是就近取值，哪个元素离文本最近、直接定义了该属性，就优先用哪个值，父元素的定义永远不会覆盖子元素的同属性直接声明
• opacity的效果是层叠级别的全局约束，只要父元素设置了非1的opacity，无论子元素如何设置自身的透明度，最终视觉效果都会被父层的透明度值做叠加计算，不存在“子元素样式覆盖父元素”的可能。
  如果需要实现“父元素悬停半透明、悬停在子元素上时完全不透明”的效果，不要直接对父元素使用opacity属性，可以改用rgba()类的半透明色彩值设置父元素的背景、文字色，这类色彩属性不会创建带透明度掩码的独立合成层，也就不会约束子元素的自定义样式。

内容的提问来源于stack exchange，提问作者Fatih Ersoy