对伪元素使用伪类选择器

有时我们想使用一个伪类选择器去选择一个伪元素以使用一些效果,按照操作的逻辑,选择器看起来可能像这样:.test::before:hover,但事实上这是不正确的。

根据 W3C 的标准,一个伪类选择器是简单的选择器。然而,一个伪元素选择器却不是,尽管它与伪类选择器类似。所以我们不可将伪类选择器置于伪元素选择器之后。

其实,就对伪类有影响的用户行为而言,如果我们仅仅需要在用户与伪元素自身互动时应用效果,那么除非使用一些晦涩难懂的布局,否则这几乎是不可能实现的。

另外,就现在来说,标准的 CSS 伪元素并不能具有伪类。所以,我们应该对真实的 DOM 元素应用伪类选择器而不是伪元素。

如果要使用伪类处理一个伪元素,标准写法如下:

1
.test:hover::before {}