将 :focus 与嵌套的 contenteditable 元素一起使用

Question

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

.focus:focus {
color: red;
}

但是，当该元素嵌套在另一个 contenteditable 元素中时，这似乎不起作用。如果我有一些像这样的 html，它会起作用：

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

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

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

为了我如何使用它，我需要外部 contenteditable 元素。我宁愿只为此使用 css 。有解决办法吗？

Answer 1

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

Answer 2

最后，我在无法满足内容的 span 周围添加了一个包装器元素。这使得焦点工作正常。

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

我不是很喜欢这个解决方案，但我也不想添加很多javascript。

Using :focus with nested contenteditable elements