最小可重现示例
<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，我会得到预期的行为。
我的环境
-
谷歌浏览器 - 版本 83.0.4103.97 (官方版本( (64 位(
-
MacOS Cataline - 版本 10.15.5
-
野生动物园版本 13.1.1
我的问题
- 这是Chrome和Safari的错误吗(似乎不太可能(
- 如果上述失败，我对CSS在这种特殊情况下的工作方式有什么不了解的吗？(也许官方规范不支持此用例？？
- 如果是上述情况(为什么这在 JSFiddle 中有效，但不能作为在 chrome 中打开的独立 HTML 文件。
功劳归@TemaniAfif(请参阅问题中的评论(。
答案是您需要在 HTML 文件的顶部声明一个文档类型。没有它，各种浏览器将以"quirks模式"呈现页面，从而允许向后兼容旧网站。