0

最小可重现示例

<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 上时，我希望出现带有文本“世界”的按钮。
  • 相反，我看到没有效果。
  • 我在 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.xml 中打开的独立 HTML 文件。
4

1 回答 1

0

为此归功于@TemaniAfif（请参阅问题中的评论）。

答案是您需要在 HTML 文件的顶部声明一个 doctype。没有它，各种浏览器将以“怪癖模式”呈现页面，这允许向后兼容旧网站。

于 2020-06-11T22:11:49.007 回答