css - 当我在 css 中使用过渡时如何保存最后一个属性

Question

我目前有 3 个 div。我不知道什么是最好的方法，这样当我点击一个元素时，这将保留过渡的最后一个属性，但我需要这种效果只发生在每个元素上，一次一个。

.son{
 width:100px;
 background:#dcdcdc;
 margin:10px;
 transition: all 0.5s;
}

最初我的元素有这些属性:

.son:active{
 width:200px;
 background:yellow;
 transition: all 0.5s;
}

但我希望你点击两次，看到过渡，但保持最后的状态。最后，这些属性将保留下来。但我不知道如何保存它们，我希望当我点击另一个元素时，最后选择的元素恢复正常。

怎么做到的？

这是我的代码:

<div class="container">
 <div class="son">text</div>
 <div class="son">text</div>
 <div class="son">text</div>    
</div>

.container{
  display:flex;
  flex-direction:row;
  justify-content: center;
  align-items:center;
}

.son{
 width:100px;
 background:#dcdcdc;
 margin:10px;
 transition: all 0.5s;
}

.son:active{
 width:200px;
 background:yellow;
 transition: all 0.5s;
}

.son:focus{
 width:200px;
 background:yellow;
 transition: all 0.5s;
}

https://jsfiddle.net/ndc6a587/

Answer 1

:visited伪标签有帮助

.container{
	display:flex;
	flex-direction:row;
	justify-content: center;
	align-items:center;
}

.son{
 width:100px;
 background:#dcdcdc;
 margin:10px;
 transition: all 0.5s;
}

.son:active, .son:focus{
 width:200px;
 background:yellow;
 transition: all 0.5s;
}

.son a {display:block; text-decoration:none;color:#000;}

:target {
   width:200px;
   color:#000;
    background:yellow;
}

<div class="container">
	<div id="one" class="son"><a href="#one">text</a></div>
  <div id="two" class="son"><a href="#two">text</a></div>
  <div id="three" class="son"><a href="#three">text</a></div>
	
</div>