伪选择器（如：:hover）可以与通用选择器一起使用吗？

Question

3

我一直在尝试开发一些组件，除非它们的父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。如果在规范中有关于 * 选择器或 > 选择器的限制，那么既然我能像这样做绕开它们，为什么还会存在这些限制呢？

- Bryan Rayner

2

在我的Chrome浏览器（Mac）上运行良好。据我所知，它是完全合法的。 - ralph.m

你刚试过JSBin了吗？因为JSBin会欺骗你。尝试使用实际文件，并查看是否可以复制错误。我也在Mac上使用Chrome。该错误也会在Firefox上发生。 - Bryan Rayner

如果 jsbin 可以“欺骗”您，那么为什么它被提供作为支持测试用例呢？ - user2864740

@BryanRayner 这里确实需要一个支持性的测试用例，但它不应该是“欺骗性”的！ - user2864740

1

你刚试了JSBin吗？不，我把代码粘贴到HTML文件中，在Chrome中运行它。完全没有问题。 - ralph.m

显示剩余5条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bryan Rayner · Accepted Answer

我现在感到非常愚蠢 :)

通过更改解决了问题

<!doctype>

to

<!doctype html>

很奇怪我直到现在才注意到这个问题。我用了多少个网站只使用了“<”和“>”，却没有意识到它们是无效的吗？