使用：使用嵌套的contenteditable元素进行聚焦

Question

我正在尝试使用contenteditable制作应用程序来编辑文档。我想将a：focus状态应用于一个元素，如下所示：

.focus:focus {
color: red;
}

但是，当元素嵌套在另一个contenteditable元素中时，这似乎不起作用。如果我有这样的HTML，它可以工作：

<span contenteditable class="focus">content</span>

但是，如果我这样做，它就不起作用了：

<div contenteditable>
<span contenteditable class="focus">content</span>
</div>

出于我如何使用它的目的，我需要外部的contenteditable元素。我更愿意只使用css。有解决方法吗？

Demo

Answer 1

这对你有用吗？ http://jsfiddle.net/tdovuyyr/2/

div:focus span {
    color: white;
    background: green;
}

Answer 2

最后，我在跨度上添加了一个无法满足的包装元素。这使焦点正常工作。

<div contenteditable>
<span contenteditable="false">
<span contenteditable class="focus">content</span>
</span>
</div>

我不太喜欢这个解决方案，但我也不想为此添加大量的javascript。