为什么CSS转换应用于哪个选择器(“elem:hover”vs“elem”)很重要?

Question

我甚至不知道如何准确地表达这个问题，所以让我试着把它放在一些代码中:

假设我有一个div元素，我想给它做动画，所以我给它两个样式:

#myElement {
  width: 100px;
  height: 100px;
  background: red;
}
#myElement:hover {
  width: 150px;
  height: 150px;
  background: green;
  transition: 1s;
}

<div id="myElement"></div>

为什么我将transition属性应用于哪个样式很重要?

如果我把它应用到默认样式，一切都正常工作，过渡工作的方式，当它改变状态从默认到悬停，反之亦然。但是当我将它应用到:hover时，它只能从默认到悬停，但不是另一种方式，它只是立即跳回来。

为什么会发生这种情况，转换属性的语义是什么?(语义在这里是正确的术语吗?)

如果是:"每当从这个状态改变到另一个状态时，应用转换。"为什么当只应用于默认时，从悬停到默认也会发生转换?

并且它不能是"无论何时将从另一个状态更改为，应用转换。"

那是什么呢?

是否存在某种遗传?

我找到了大量关于如何应用转换，语法等的资源，但我找不到任何解释这种行为的地方。

---

编辑:我想我太专注于过渡属性，没有研究"继承"的伪类。如果我把过渡设置为默认状态:hover会继承它。此外，我不知何故认为它只会在:悬停状态一旦过渡完成，这是错误的。这里有一个不同的场景，如果有人仍然感到困惑，没有"继承":https://jsfiddle.net/xu6Lsexr/1/

谢谢你为我澄清这一点!

Answer 1

但是当我将它应用到:hover时，它只能从默认到悬停，但不是另一种方式，它只是立即跳回来。为什么会发生这种情况，转换属性的语义是什么?

这与任何"转换属性的语义"无关。

无论你为#myElement:hover定义的样式是什么，当元素处于悬停状态时，只应用，而无论你为#myElement定义的样式是什么，都将在状态、元素的"正常"状态和悬停状态中应用。

因此，如果你将transition与选择器#myElement放入第一条规则中，该元素在两种状态下都具有该属性，而如果你将其放入第二条规则中，它只在悬停状态下具有该属性。

一个简单的例子，告诉你这与transition属性本身无关:

#foo {
  font-size: 20px;
}
#foo:hover {
  background-color: red;
  border: 1px solid;
}
#bar {
  background-color: red;
  font-size: 20px;
}
#bar:hover {
  border: 1px solid;
}

现在，#foo只有在鼠标悬停时才会有红色背景色，而#bar在两种状态下都有红色背景色，transition或任何其他属性也是如此。

Answer 2

没有:hover选择器的规则意味着"不管它是否是:hover "。它的意思不是"不是:hover"，而是:not(:hover)。这就是为什么转换是双向的。

当应用于:hover时，没有为非悬停状态定义过渡，因此一旦元素停止匹配:hover，就不会发生过渡动画。没有使用悬停状态的过渡，因为在应该发生过渡的时候，元素已经停止匹配:hover。