如何为 "a:before "编写":hover "和":visited "条件?
我正在尝试 "a:before:hover",但它没有发挥作用。
这取决于你实际上想做什么。
如果你只是想在a
元素匹配伪类时,将样式应用到:before
伪元素,你需要写a:hover:before
或a:visited:before
。注意伪元素是在*伪类之后(事实上是在整个选择器的最后)。还要注意它们是两种不同的东西;一旦你遇到像这样的语法问题,把它们都称为"伪选择器"就会使你感到困惑。
如果你在写CSS3,你可以用双冒号来表示一个伪元素,以使这种区别更加清晰。因此,a:hover::before
和a:visited::before
。但是,如果你是为IE8和更老的浏览器开发的,那么你可以使用单冒号就可以了。
伪类和伪元素的这种特定顺序在规范中说明。
在一个选择器中,一个伪元素可以被附加到简单选择器的最后一个序列。
一个简单选择器序列是一个没有被组合器分开的简单选择器链。它总是以一个类型选择器或一个通用选择器开始。在这个序列中不允许有其他类型选择器或通用选择器。
一个简单选择器是一个类型选择器、通用选择器、属性选择器、类选择器、ID选择器、或伪类。
伪类是一个简单的选择器。然而,一个伪元素不是,尽管它类似于一个简单的选择器。
然而,对于用户行为的伪类,如:hover
1,如果你需要这个效果只在用户与伪元素本身而不是a
元素交互时应用*,那么除了通过一些晦涩的依赖布局的变通方法,这是不可能的。正如文本所暗示的,标准的CSS伪元素目前不能有伪类。在这种情况下,你需要将:hover
应用于一个实际的子元素,而不是一个伪元素。
1 当然,这并不适用于问题中的链接伪类,如:visited
,因为伪元素不是链接</sub>。
写a:hover::before
而不是a::before:hover
。[例子](
您也可以使用右尖括号(">")将您的操作限制在一个类中,就像我在这段代码中所做的那样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span {
font-size:12px;
}
a {
color:green;
}
.test1>a:hover span {
display:none;
}
.test1>a:hover:before {
color:red;
content:"Apple";
}
</style>
</head>
<body>
<div class="test1">
<a href="#"><span>Google</span></a>
</div>
<div class="test2">
<a href="#"><span>Apple</span></a>
</div>
</body>
</html>
注意: hover:before开关只对.test1类有效。