CSS General sibling 不适用于 :focus?

Question

我想显示文本，当用户将鼠标悬停在该文本上时，他应该看到一个输入表单而不是文本。 当它取消悬停时，它会再次被文本替换。 但是，如果用户聚焦输入表单，即使未悬停输入表单也应该保留。

问题是，如果它未悬停但输入表单获得焦点，则输入表单和文本元素可见(文本元素应隐藏)。

我正在使用这个 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!

JSfiddle 在这里:http://jsfiddle.net/a8U3P/

有人知道为什么这不起作用吗？

编辑:我试过 Firefox 13 和 Chromium

Answer 1

general sibling combinator , E ~ F，匹配前面有 E 元素的 F 元素。 “先于”意味着 E 元素出现在 F 元素之前。

您希望第一个 child 在之前是最后一个 child 吗？根据“第一个”和“最后一个”的定义，这永远无法匹配任何元素。