如何为 'a:before' 和 'a:after' 编写 ':hover' 条件? [英] How can I write a ':hover' condition for 'a:before' and 'a:after'?

问题描述

如何为 a:before 编写 :hover 和 :visited 条件?

How can I write :hover and :visited condition for a:before?

我正在尝试 a:before:hover，但它不起作用.

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

推荐答案

这取决于你实际想要做什么.

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

如果您只是希望在 a 元素与伪类匹配时将样式应用于 :before 伪元素，则需要编写 a:hover:before 或 a:visited:before 代替.注意伪元素出现在伪类之后(事实上，在整个选择器的最后).还要注意它们是两个不同的东西.称它们为伪选择器"；一旦遇到诸如此类的语法问题，就会使您感到困惑.

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.

如果您正在编写 CSS3，您可以用双冒号表示一个伪元素，以使这种区别更加清晰.因此，a:hover::before 和 a:visited::before.但是，如果您正在为旧版浏览器(例如 IE8 和更早版本)进行开发，那么您可以不使用单冒号.

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.

简单选择器可以是类型选择器、通用选择器、属性选择器、类选择器、ID 选择器或伪类.

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.

不过，对于:hover¹等用户动作伪类，如果需要这个效果只当用户与伪元素本身而不是 a 元素交互，那么除了通过一些模糊的布局相关的解决方法之外，这是不可能的.正如文本所暗示的，标准 CSS 伪元素目前不能有伪类.在这种情况下，您需要将 :hover 应用于实际的子元素而不是伪元素.

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.

¹ _{当然，这不适用于链接伪类，例如问题中的 :visited，因为伪元素不是链接.}

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

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