CSS opacity问题：photo slider active-thumbnail类opacity无法超0.6

结合你描述的「hover状态透明度正常、active类其他样式生效、仅opacity超过0.6就失效、设置低于0.6的透明度可正常生效」的表现，核心问题来自CSS层叠规则的冲突，可按以下方向排查修复：

• 优先检查选择器权重匹配问题
  你当前写的.active-thumbnail是单类选择器，权重为0,1,0，和缩略图基础类.photo-thumbnail的权重完全一致。如果该类的样式块在样式表中的位置早于基础类的样式定义，就会被后面同权重的基础类规则覆盖。这种阈值式的失效表现，通常是存在一条针对非hover状态的透明度规则，将所有不在hover状态的缩略图透明度上限锁定在0.6：当你设置的active类透明度低于0.6时，不受上限规则影响，可正常显示；当设置值高于0.6时，就会被上限规则截断为0.6，刚好匹配你观察到的现象。

  修复方式：不要单独定义.active-thumbnail的选择器，将其和基础类绑定为.photo-thumbnail.active-thumbnail，此时选择器权重为0,2,0，高于基础类权重，可稳定覆盖基础透明度值。

• 排查容易遗漏的通用规则冲突
  这类缩略图组件的常规写法中，往往会补一条“非hover状态下普通缩略图透明度为0.6”的规则，比如.photo-thumbnail:not(:hover) { opacity: 0.6; }，这条规则带伪类选择器，权重为0,2,0，比单独的.active-thumbnail权重更高，会直接将选中态的透明度截断在0.6的阈值上。

  修复方式：在这条通用规则中补充排除选中态的判断，修改为.photo-thumbnail:not(:hover):not(.active-thumbnail) { opacity: 0.6; }，让选中态的缩略图不受通用规则的限制。

• 调整样式书写顺序
  按权重从低到高的顺序排列样式块，避免同权重规则的无序覆盖：
  1. 最先放置基础类的通用样式，包括尺寸、边距、过渡动画、基础透明度
  2. 其次放置选中态的样式规则
  3. 最后放置hover状态的样式，保证hover状态的优先级最高，和选中态的样式不冲突

修正后的可直接使用的样式示例：

.photo-thumbnail {
  width: 10%;
  margin: 2px;
  opacity: 0.6;
  transition: opacity 300ms ease-in;
}

/* 绑定基础类的选中态样式，避免权重不足 */
.photo-thumbnail.active-thumbnail {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

/* 放在最后保证hover优先级 */
.photo-thumbnail:hover {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

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