我该如何写:hover和:visited条件a:before?
:hover
:visited
a:before
我正在尝试a:before:hover,但它不起作用。
a:before:hover
这取决于您实际尝试执行的操作。
如果您只是希望在元素与伪类匹配时将样式应用于:before伪元素,则需要编写or代替。注意伪元素出现 在 伪类之后(事实上,在整个选择器的最后)。还要注意它们是两个不同的东西。一旦遇到诸如此类的语法问题,将它们称为“伪选择器”会使您感到困惑。a``a:hover:before``a:visited:before __
:before
a``a:hover:before``a:visited:before
如果您正在编写 CSS3,则可以用双冒号表示伪元素,以使这种区别更加清晰。因此,a:hover::before和a:visited::before。但是,如果您正在为旧版浏览器(例如 IE8 和更早版本)进行开发,那么您可以很好地避免使用单冒号。
a:hover::before
a:visited::before
伪类和伪元素的特定顺序在规范中进行了说明:
一个伪元素可以附加到选择器中的最后一个简单选择器序列。 简单选择器 序列 是不被组合器分隔的简单选择器链。它总是以类型选择器或通用选择器开头。序列中不允许有其他类型选择器或通用选择器。 简单选择器 可以是类型选择器、通用选择器、属性选择器、类选择器、ID 选择器或伪类。
一个伪元素可以附加到选择器中的最后一个简单选择器序列。
简单选择器 序列 是不被组合器分隔的简单选择器链。它总是以类型选择器或通用选择器开头。序列中不允许有其他类型选择器或通用选择器。
简单选择器 可以是类型选择器、通用选择器、属性选择器、类选择器、ID 选择器或伪类。
伪类是一个简单的选择器。然而,伪元素不是,即使它类似于一个简单的选择器。
但是,对于诸如:hover1之类的用户操作伪类,如果您需要 仅 在用户与伪元素本身而不是a元素交互时应用此效果,那么除了通过一些晦涩的依赖于布局的解决方法之外,这是不可能的. 正如文本所暗示的,标准 CSS 伪元素目前不能有伪类。在这种情况下,您将需要应用:hover到实际的子元素而不是伪元素。
a
1 当然,这不适用于:visited问题中的链接伪类,因为伪元素不是链接。