如何防止 CSS `:before` 文本可编辑而 `div` 本身是可编辑的？答案

【问题标题】：How to prevent the CSS `:before` text being editable while the `div` itself is editable?如何防止 CSS `:before` 文本可编辑而 `div` 本身是可编辑的？
【发布时间】：2015-04-05 06:35:58
【问题描述】：

我有一个带有div 的可编辑正文：

<body contenteditable="true">
    <div class="paragraph">Text</div>
<body/>

还有:before 风格：

div.paragraph:before {
    content: "☑";
}

小提琴：http://jsfiddle.net/uy9xs5p0/

在 Firefox 中，我可以将光标放在文本的开头并按退格键并删除复选标记。如何预防？

【问题讨论】：

你能修改你的html吗？
这是一个奇怪而有趣的案例。您是否尝试在:before 上使用（Mozilla 特定的）-moz-user-modify？
嗯，好像不行：jsfiddle.net/eezsgc62
在 Chrome 中也复制了：jsfiddle.net/davidThomas/5y00q6ya，我很惊讶这是可能的，因为生成的内容不是（应该是？）在 DOM 中。
@David Thomas：在 Chrome 中，您似乎可以在主要内容为空时仅删除生成的内容。在 Firefox 中，您可以随时删除生成的内容

标签： css firefox

【解决方案1】：

您没有编辑:before 内容。

它只是删除整个 .paragraph 元素一旦它为空，或者当你在标签的开头时退格。

【讨论】：

在firefox中不必为空，他可以去掉勾
删除之前的文字后，文字“Text”仍然存在。
是的，但它不会删除:before的内容，它会删除包装的div。
好的，我在 Firefox 检查器中看到了。

【解决方案2】：

当此问题重现时（例如通过this fiddle），开发者工具显示div.paragraph 已被删除。只剩下一个文本节点。

变成

要阻止 div 被删除，不要给它的父级 contenteditable。改用这个：

<body>
    <div class="paragraph" contenteditable="true">Text</div>
</body>

小提琴：http://jsfiddle.net/5y00q6ya/3/

【讨论】：

这应该是公认的答案。您在另一个答案前 2m 回答了。

【解决方案3】：

您在父div中设置contenteditable，因此在擦除时，您正在删除div.paragraph，因此伪将消失。

请注意，如果您在子 div 中设置属性，则可以使其工作。

div.paragraph:before {
    content: "☑";
}

<div>
    <div contenteditable="true" class="paragraph">Text</div>
</div>

【讨论】：

【解决方案4】：

解决此问题的可能方法。这似乎可以按您的意愿工作。

<div contenteditable="true" class="upper-div">
    <div class="paragraph">Text</div>
</div>

div.upper-div:before {
    content: "☑";
    display:inline-block;
}
.paragraph{display:inline-block;}

【讨论】：

您的建议将复选标记移至外部。我需要每个 div 上的复选标记，而不仅仅是 body 上的复选标记。

【解决方案5】：

其他答案解释了问题。如果 div 从其父级继承其可编辑性，则可以删除子级 div 本身以及 div 以及之前的内容。

为了防止这种情况，必须不能将可编辑的div 放在可编辑的父级中。这使得有必要将每个可编辑的 div 放入不可编辑的父 div 以保留可编辑的子 div。

下面的例子展示了这一点

div.node {
    margin-left: 1em;
}

div.paragraph:before {
    content: "☑";
}

<div contenteditable="false" class="node">
    <div contenteditable="true" class="paragraph">Major</div>
    <div contenteditable="false" class="node">
        <div contenteditable="true" class="paragraph">Minor</div>
    </div>
</div>

【讨论】：