为什么 universal/wildcard 选择器上的悬停伪选择器似乎不适用？

Question

最小可重现示例

<html>
 <head>
  <style>
   div {
    background-color: #F00;
   }
   * button {
    opacity: 0;
   }
   *:hover button {
    opacity: 1;
   }
  </style>
 </head>
 <body>
  <button>hello</button>
  <div>
   <button>world</button>
  </div>
 </body>
</html>

预期行为与实际行为

当我将鼠标悬停在红色 div 上时，我希望出现带有文本 "world" 的按钮。
相反，我看到没有效果。
我在 Chrome 和 Safari 中得到完全相同的行为。
有趣的是，在我将上面的内容制作成一个单独的 HTML 文件并在 chrome/safari 中运行之前，我在 JSFiddle 中尝试了那个确切的片段，它在那里工作得很好（同一个浏览器）。
如果我将行 *:hover button 更改为 div:hover button，我会得到预期的行为。

我的环境

Google Chrome - 版本 83.0.4103.97（官方构建）（64 位）
MacOS Cataline - 版本 10.15.5
Safari 版本 13.1.1

我的问题

这是 Chrome 和 Safari 的错误吗（似乎不太可能）
如果没有上述情况，我是否不了解 CSS 在这种特殊情况下的工作原理？（也许官方规范不支持这个用例？？）
如果是上述情况（为什么这在 JSFiddle 中有效，但不能作为在 chrome 中打开的独立 HTML 文件。

Answer 1

感谢@TemaniAfif（参见问题中的评论）。

答案是您需要在HTML 文件的顶部声明一个文档类型。没有它，各种浏览器将在 "quirks mode" 中呈现页面，这允许向后兼容旧网站。

为什么 universal/wildcard 选择器上的悬停伪选择器似乎不适用？

Why does hover pseudo-selector on universal/wildcard selector seem to not apply?

css

safari

google-chrome

wildcard

pseudo-element

最小可重现示例

预期行为与实际行为

我的环境

我的问题