css - 在同一元素中定义伪类和伪元素

Question

我的问题很简单，只是我想要做的是:hover，:after并且:before，我想在嵌入同一个元素之后悬停 anf，查看我的 css 代码：-

#sidebar .widget li a:before:hover, #sidebar .widget li a.active:before { 
    background-position: 65% 65.7%;
}

这里元素有一个图标:before，我可以在其中删除或修改，而且我想在它上面有一个悬停效果......

任何解决方案，我的控制台不显示悬停效果？

score 2 · Accepted Answer

有趣的问题。如果您能够向我们展示一个工作示例，我们可能会提供更多帮助。

但是，从理论上讲，您尝试做的事情并没有错（尽管并非所有浏览器都会喜欢它：尤其是 IE8 及更低版本）。

这里要理解的重要一点是，它:hover是一个伪类，而:before是一个伪元素。

这是标准的快速摘录（感谢之前在 Stack Overflow 上的这个答案）：

选择器中的任何位置都允许使用伪类，而伪元素只能附加在选择器的最后一个简单选择器之后。

您犯的错误在于您的语法：您附加它们的顺序。

试试这个：

#sidebar .widget li a:hover:before,
#sidebar .widget li a.active:before { 
    background-position: 65% 65.7%;
}

那应该如你所愿。然而，这不会给你带来很好的跨浏览器覆盖，并不是所有浏览器都支持的东西都实现了。

更好的方法是：

这将为您提供更好的跨浏览器兼容性。

1 回答 1