为什么不透明度声明的顺序在这个两阶段渐变中很重要?

Question

我编写了一个两相衰落按钮。我注意到声明不透明状态的顺序很重要。

.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的理解而言)。

Answer 1

匹配:hover的所有祖先元素也将匹配:hover。虽然:hover是一个CSS选择器，但这是在HTML规范中指定的，而不是选择器。来自W3C HTML5第4.14.2节:

定义:hover伪类来匹配一个元素，而用户用指向设备指定一个元素。对于仅定义:hover伪类的目的，HTML用户代理必须认为一个元素是用户指定的，如果它是:

• 用户使用指向设备指示的元素。

• 一个元素，它有一个后代，用户使用一个指向设备来指示。

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