如何写：hover条件为a：before和a：after？ [英] How to write :hover condition for a:before and a:after?

问题描述

如何写：hover 和：visited code>？

我尝试 a：before：hover >

解决方案

这取决于你实际想做什么。

您只需要在 a 元素匹配伪类时，对：before 伪元素应用样式，需要写 a：hover：before 或 a：visited：before 。请注意伪元素在之后伪类（实际上，在整个选择器的末尾）。还要注意，它们是两个不同的东西;如果你遇到类似这样的语法问题，调用它们两个伪选择器会让你困惑。

如果你正在编写CSS3，伪元素与双冒号使这种区分更清楚。因此， a：hover :: before 和 a：visited :: before 。但是，如果你正在开发旧的浏览器，如IE8和更旧的，那么你可以逃脱使用单冒号很好。

伪类的特定顺序和伪元素在规范中说明：

一个伪元素可以附加到选择器中的最后一个简单选择器序列。

em>简单选择器序列是一个不由组合器分隔的简单选择器链。它始终以类型选择器或通用选择器开头。

是一个类型选择器，通用选择器，属性选择器，属性选择器，类选择器，ID选择器或伪类。

伪类是一个简单的选择器。

但是，对于用户操作伪类，例如 ：hover 1 ，如果您需要此效果仅在用户与伪元素本身交互时才应用 c> a 元素，那么这是不可能的，除了通过一些晦涩的布局相关的解决方法。如文本所暗示的，标准CSS伪元素当前不能具有伪类。在这种情况下，您需要将：hover 应用于实际的子元素，而不是伪元素。

---

¹ _{当然，这不适用于链接伪类，例如：visited ，因为伪元素不是链接。}

How to write :hover and :visited condition for a:before?

I'm trying a:before:hover but it's not working

解决方案

This depends on what you're actually trying to do.

If you simply wish to apply styles to a :before pseudo-element when the a element matches a pseudo-class, you need to write a:hover:before or a:visited:before instead. Notice the pseudo-element comes after the pseudo-class (and in fact, at the very end of the entire selector). Notice also that they are two different things; calling them both "pseudo-selectors" is going to confuse you once you run into syntax problems such as this one.

If you're writing CSS3, you can denote a pseudo-element with double colons to make this distinction clearer. Hence, a:hover::before and a:visited::before. But if you're developing for legacy browsers such as IE8 and older, then you can get away with using single colons just fine.

This specific order of pseudo-classes and pseudo-elements is stated in the spec:

One pseudo-element may be appended to the last sequence of simple selectors in a selector.

A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

A pseudo-class is a simple selector. A pseudo-element, however, is not, even though it resembles a simple selector.

However, for user-action pseudo-classes such as :hover¹, if you need this effect to apply only when the user interacts with the pseudo-element itself but not the a element, then this is not possible other than through some obscure layout-dependent workaround. As implied by the text, standard CSS pseudo-elements cannot currently have pseudo-classes. In that case, you will need to apply :hover to an actual child element instead of a pseudo-element.

---

¹ _{Of course, this does not apply to link pseudo-classes such as :visited as in the question, since pseudo-elements aren't links.}

这篇关于如何写：hover条件为a：before和a：after？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！