CSS通用同级不使用：焦点？

我想显示文本，当用户将此文本悬停时，他应该看到一个输入表单，而不是文本。 当它未被覆盖时，它会再次被文本替换。 但是如果用户关注输入表单，即使未被发现，输入表单也应该保持不变

问题是，如果未被发现，但输入表单是集中的，则输入表单和文本元素是可见的（文本元素应该是隐藏的）

我正在使用这个HTML代码

<div class="editable">
  <span>hello</span>
  <input value="hello" />
</div>

你好

这个css用于：

.editable :last-child { display: none; }

.editable:hover > :first-child { display: none; }
.editable:hover > :last-child { display: block; }

.editable > :last-child:focus { display: block; }
.editable > :last-child:focus~:first-child { display: none; } // <- this doesn't work!

.editable:最后一个子项{显示：无；}
.editable:悬停>：第一个子项{显示：无；}
.editable:悬停>：最后一个子项{显示：块；}
.editable>：最后一个子项：焦点{显示：块；}
.editable>：last child:focus~：first child{display:none；}/，
E~F
与前面有
E
元素的
F
元素相匹配。“前置”表示
E
元素位于
F
元素之前

你到底期望第一个孩子的前面会有最后一个孩子吗？根据“first”和“last”的定义，“first”和“last”不能匹配任何元素。
E~F

与前面有

E

元素的

F

元素匹配。“前置”表示

E

元素位于

F

元素之前

---

你到底期望第一个孩子的前面会有最后一个孩子吗？根据“第一个”和“最后一个”的定义，这永远无法与任何元素匹配。

好的观点！更改跨距和输入标记的顺序（并切换：first child和：last child）修复了它！说得好！更改跨距和输入标记的顺序（并切换：first child和：last child）修复了它！