多类CSS级联问题：.media类hover效果失效及优化需求

核心实现思路 #

通过基础类统一控制布局与交互，子类单独配置背景图/专属样式，同时确保hover反转效果作用于整个容器（包含文本和背景图）。

代码实现 #

HTML结构 #

<div class="media book">经典文学</div>
<div class="media movie">热门院线</div>
<div class="media movie-old">黑白老片</div>

CSS样式 #

/* 基础.media类：统一布局、文本基础样式 */
.media {
  width: 220px;
  height: 320px;
  padding: 1.2rem;
  box-sizing: border-box;
  color: #222;
  font-size: 1.1rem;
  /* 确保背景图适配容器 */
  background-size: cover;
  background-position: center;
  /* 过渡动画优化体验 */
  transition: filter 0.3s ease;
}

/* .book类通用样式 */
.book {
  border: 2px solid #ddd;
  background-color: #f8f8f8;
}

/* .movie类专属背景图 */
.movie {
  background-image: url('movie-default.jpg');
}

/* .movie-old类专属背景图 */
.movie-old {
  background-image: url('old-movie-bg.jpg');
}

/* 全局hover反转效果：作用于所有.media元素 */
.media:hover {
  filter: invert(1);
  /* 可选：配合色相旋转优化彩色反转后的视觉效果 */
  /* filter: invert(1) hue-rotate(180deg); */
}

失效问题排查与修复 #

1. 优先级冲突：如果子类的hover样式覆盖了.media:hover，可提升选择器权重（比如用.media.book:hover），但优先保证.media:hover的规则写在子类样式之后。
2. 背景图层级问题：若背景图通过伪元素（::before/::after）实现，需确保伪元素未脱离文档流（无position: fixed），否则无法继承父元素的filter效果。
3. fixed背景图限制：使用background-attachment: fixed的背景图不会继承父元素filter，需将背景图放在容器内的子元素中而非直接用fixed属性。

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