单击后隐藏单选按钮的标签，不再显示（仅限html/css）

Question

我希望在选择某个复选框 (#red) 时显示单选按钮 (#green) 的标签。好的，这不是什么大问题。但我还想要的是，点击标签后，应该检查#green，标签应该消失......并且永远不会回来，即使不再检查#green。

我想到了以下条件：标签仅在选中#red 并且具有 :focus 时才可见。但不幸的是，在点击应用到#green 之前，#red 的 :focus 丢失了，因此从不检查#green。

代码如下：

input + label {
  position: absolute;
  top: 100px;
  width: 100px;
  height: 100px;
}

#red + label {
  background-color: #FF0000;
  left: 100px;
}

#green + label {
  display: none;
  background-color: #00FF00;
  left: 200px;
}

#blue + label {
  display: none;
  background-color: #0000FF;
  left: 300px;
}

#blue:checked + label {
  display: block;
}

#red:checked + label {
  display: none;
}

#red:checked:focus ~ #green + label	{
  display: block;
}

<input id="red" type="checkbox">
<label for="red" tabindex="3"></label>

<input id="green" type="radio" name="radios">
<label for="green" tabindex="1"></label>

<input id="blue" type="radio" name="radios" checked>
<label for="blue" tabindex="2"></label>

所以，点击红色方块后，应该会出现一个绿色方块。点击绿色方块后，绿色方块和蓝色方块应该会消失。

希望有人能帮忙！

Answer 1

这很有趣，但可能 js 可以让它更快。

Codepen for you。

我已经添加了主要部分：

#red:checked ~ #green + a:target { display: none; }

它看起来像你想要的，主要的 hack 与 a 元素和目标。