:hover 伪类不适用于通用选择器 *
如果我写
h1:hover, li:hover {color:green;}
h1 和 li 元素都会获得悬停效果。
如果我写：
*:hover {color: green;}
这仅对锚元素有效。
:hover 伪类不适用于通用选择器吗？
If I write
h1:hover, li:hover {color:green;}
Both h1 and li elements get the hover effect.
Buf if I write:
*:hover {color: green;}
This has effect only on anchor elements.
Does :hover pseudoclass not work with universal selector?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
它确实有效。问题是页面上的所有文本最终都会变成绿色，因为
body元素也匹配，因此您不会看到“鼠标悬停”效果只要您的光标位于视口上的任何位置（即页面主体）。您可以通过不使用通用选择器（我的意思是，为什么要这样做？）或指定body:hover颜色来解决此问题。如果您仅在
a元素上看到悬停效果，则您可能在某处有一个a:hover样式，它覆盖了您的*:hover样式作为通用选择器不如类型选择器具体（即根本不具体）。但文本的其余部分应始终为绿色，直到将光标移出视口，例如将其移至浏览器镶边或远离窗口。 （请注意，我在评论中链接到的小提琴中的“视口”是一个 iframe。）It does work. The catch is that all the text on your page ends up turning green because the
bodyelement is also matched, so you don't see a "mouse-over" effect as long as your cursor is anywhere on the viewport (i.e. the page body). You can work around this either by not using the universal selector (I mean, why would you?) or by specifying abody:hovercolor.If you see a hover effect only on
aelements, you probably have ana:hoverstyle somewhere that's overriding your*:hoverstyle as the universal selector is less specific than a type selector (that is, not specific at all). But the rest of your text should always be green until you take the cursor out of the viewport, for instance by moving it to the browser chrome or away from the window. (Note that the "viewport" in the fiddle I link to in my comment is an iframe.)你说的是什么浏览器？中和
html:hover和body:hover表明其余元素在悬停时会相应变化，至少在 Chrome 中是这样，我相信任何其他现代浏览器都是如此。演示： jsfiddle.net/Marcel/cTpxS
What browser are you talking about? Neutralising
html:hoverandbody:hoverdemonstrates that the remaining elements change accordingly on hover, in Chrome at least and I'm sure any other modern browser.Demo: jsfiddle.net/Marcel/cTpxS