使用伪元素后的 CSS 主动选择器答案

【问题标题】：CSS active selector using after pseudo element使用伪元素后的 CSS 主动选择器
【发布时间】：2014-05-24 00:34:27
【问题描述】：

我在伪选择器之后的活动图标选择器上实现了一个问题。下面是尝试过的代码。

<html>
<head>
<style type="text/css">
.btn{
width:25%;          
}
.name{
background: #fff;
color: #000;
text-align: center;
height: 35px;
line-height: 35px;
font-size: 18px;
border: 1px solid;  
} 
.name:after{
content: "";
position: absolute;
left: 210px;
top: 19px;
background-image: url('dark.png');
width: 15px;
height: 15px;
background-size: 100% auto; 
}
.name:after:active{
background-image: url('light.png');
}
</style>
</head>
<body>
<div class="btn name">Submit</div>
</body>
</html>

建议我使用伪选择器后实现主动选择器的方法。提前致谢。

【问题讨论】：

标签： html css css-selectors pseudo-element

【解决方案1】：

伪元素需要排在最后：

.name:active:after{
background-image: url('light.png');
}

如果您希望仅在激活伪元素时更改伪元素样式，那是不可能的。请参阅this answer 了解说明。

【讨论】：

@Prashant：我不确定你是否理解我评论的任何一个答案。请再读一遍。
如果您不需要/不希望父元素处理指针事件，那么您可以将pointer-events: none; 放在父元素上，将pointer-events: auto; 放在伪元素上。这将导致伪元素样式仅在伪元素被激活时出现，如果父元素被激活则不会发生任何事情。