为啥不透明度声明的顺序在这个两阶段淡入中很重要？

Posted 2023-03-06

【中文标题】为啥不透明度声明的顺序在这个两阶段淡入中很重要？

【英文标题】：Why is the order of opacity declaration important in this two-phase fade-in?为什么不透明度声明的顺序在这个两阶段淡入中很重要？

【发布时间】：2015-10-29 12:20:00

【问题描述】：

我写了一个两阶段的淡入淡出按钮。我注意到声明不透明度状态的顺序很重要。

此 CSS 有效：

.item .btn-remove 
  transition: opacity 0.5s ease-in-out;
  opacity: 0;


.item:hover .btn-remove 
  opacity: .25;


.item .btn-remove:hover 
  /* works here */
  opacity: 1;

与不工作的版本相比：

.item .btn-remove 
  transition: opacity 0.5s ease-in-out;
  opacity: 0;


.item .btn-remove:hover 
  opacity: 1;


.item:hover .btn-remove 
  opacity: .25;

我可以看到声明的顺序是有道理的，但不明白为什么这会有所作为，因为规则不冲突（就我目前对 CSS 的理解而言）。

请查看我的fiddle 示例。

【参考方案1】：

匹配:hover 的元素的所有祖先也将匹配:hover。尽管:hover 是一个 CSS 选择器，但这是在 html 规范中指定的，而不是选择器。来自section 4.14.2 of W3C HTML5：

:hover 伪类被定义为匹配一个元素，“而用户指定一个带有指针设备的元素”。仅出于定义:hover 伪类的目的，HTML 用户代理必须将一个元素视为用户指定的元素，如果它是：

用户使用指点设备指示的元素。

具有用户使用定点设备指示的后代的元素。

因此，即使.btn-remove 本身与:hover 匹配（即当.btn-remove 是被指定的元素时），.item:hover .btn-remove 规则也适用。换句话说，这两个 CSS 规则实际上确实相互重叠，从而产生了冲突。

【讨论】：

...它们具有相同的特异性。但是，我可以通过另一个属性（比如说背景颜色）看到这一点，但不透明度（至少对于 Chrome 44）它可以按预期工作，无论顺序如何。很奇怪。