html - 在 div 内的两个元素之间切换

Question

<div class="test">
<span class="one">Alias</span>
<span class="two">Bobby</span>
<span class="show"><input type="text" value="Bobby"><br>  <button>Save</button></span>
<span class="three">Edit</span>
</div>

CSS 是否有可能，当我点击 test div 隐藏 span two 并显示 span show 并可能更改 Edit关闭？

如果不是，我该如何实现？

我以为 :focus 很重要，但事实并非如此。这是我想要的示例，但只有在您单击它时才会显示:

https://jsfiddle.net/g9bwbw3d/

Answer 1

我相信您正在寻找 :active 选择器。
诅咒它没有 js 强大。
检查一下

https://jsfiddle.net/59ae3jmq/2/

<div id="test" class="test">
    <span class="one">Alias</span>
    <span class="two">Bobby</span>
    <span class="show"><input type="text" value="Bobby"><br><a href="#top"><button>Save</button></a></span>
    <a href="#test" class="three">Edit</a>
</div>

.test { display: flex; line-height: 35px; border-bottom: 1px solid #EEE; ;pointer:default;outline:none}
.test span { flex: 1;}

.test .show { display: none; }

.test:target > .two { display: none; }
.test:target > .show { display: block; }