2个伪选择器在CSS #id中分别不起作用：after：active {}

Question

我需要点击车轮，所以汽车前进100px，这种情况下的车轮是＆＃34;＆＃34; ，但过渡不适用于＆＃34;：after：active＆＃34;选择器，但它与其他选择器一起使用。我怎么能纠正这个？

PS：我正在使用chrome。

#Car{
height: 30%;
width: 30%;
background-color: blue;
position:relative;
bottom:20%;
left: 30%;
top:-40%;
border-top-right-radius : 20% 30%;
border-bottom-right-radius : 20% 30%;}

 #Car:after{
 content:"";
 height: 50%;
 width: 20%;
 position: absolute;
 left: 50%;
 top:90%;
 border-radius: 50%;
 background: #cc7b0f;
 border: 10px solid grey;
 z-index:6;
 }

 #Car:after:active{
 transform: translate(100px, 0px);
 transition:ease-in-out;
 }

Answer 1

伪元素必须是最后的，即：

#Car:active:after

https://jsfiddle.net/s1krLby1/

Answer 2

您的选择器Car:after:active是什么意思

:after element that is :active should have rules{*translate*}

但你需要的是

#Car that is :active has :after element which should have rules{*translate*}

因此您应该将选择器更改为

#Car:active:after