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

Question

我需要点击车轮，所以汽车前进 100 像素，在这种情况下，车轮是“after”，但过渡不适用于“: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