css - 悬停和聚焦的字段的 CSS 顺序是什么

Question

当我的输入被聚焦和悬停时，它会是什么颜色？

input:hover {
  color: red;
}

input:focus {
  color: blue;
}

Answer 1

这些可能在同一个样式表中并且它们具有相同的特性（一个伪类和一个元素），因此级联顺序中唯一剩下的步骤是指定顺序。也就是说，如果它被悬停和聚焦，它将是蓝色的。

关于特异性：http ://www.w3.org/TR/CSS2/cascade.html#specificity

Answer 2

input:hover {
  color: red;
}

input:focus {
  color: blue;
}

在演示中，由于输入是焦点，并且 CSS 已:focus在最后列出，因此输入将是蓝色的。

如果你颠倒这两个规则集，输入将是红色的，因为:hover是最后一个。

Answer 3

尝试输入：焦点：悬停

通常我们只有 3 个状态，活动、悬停和焦点。你想要什么是不可能的，但试试上面的代码。