Question

我一直在努力开发一些隐藏自己的组件，除非他们的父div处于悬停状态。我试着让我的CSS解开我的HTML结构，所以我按照这样构建我的规则：

.show-on-hover
{
  display:none;
}
*:hover > .show-on-hover
{
  display:block;
}

我认识到浏览器有时会阻塞通用选择器，这就是这种情况。代码在iFrame（如JSBin）内部工作时，或者如果我将*:hover更改为p:hover。但是，Chrome拒绝承认正常环境中的规则。

你可以在这里看到我的代码，但是你需要把它从JSBin中拿出来并放到一个文件里才能看到发生了什么。

这可能听起来像一个愚蠢的问题，也许我只是没有在这里看到一些东西，但这是规范的一部分吗？如果是这样，那么，为什么不能更好地记录这些？为什么它在iframe中工作，而不是在浏览器的常规部分？

编辑：

我把我的代码更改为：

:not(fakeTag):hover > .show-on-hover
{ 
  display:block;
}

它完全符合我的要求*:hover > .show-on-hover。如果*选择器或>选择器的规格存在限制，为什么会出现这种情况，因为我可以做这样愚蠢的事情来绕过它？

Answer 1

我现在感觉真的很蠢:)

通过更改

解决了问题

<!doctype>

到

<!doctype html>

奇怪的是，直到现在我才注意到这一点。我开发了多少个网站而没有意识到它是无效的？