2個僞選擇器沒有在CSS中分別工作#id：after：active {}

Question

我需要點擊車輪，所以車前進100px，在這種情況下車輪是「後」，但過渡不與「：after：active」選擇器一起工作，但與其他選擇器一起工作。我該如何糾正這一點？

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: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 

Answer 2

僞元素必須最後一個出現，即：

#Car:active:after 

https://jsfiddle.net/s1krLby1/