如果您有以下
HTML：
<div contenteditable="true"> <p>The first paragraph</p> <p>The second paragraph</p> </div>
有没有办法将正在编辑的段落与div中的所有其他段落进行风格区分？
div > p:focus { border: 1px solid red }
将不适用于正在编辑的段落.
这是一个JSFiddle你可以玩.
如何对正在编辑的段落(< p> -tag)进行风格不同？
我更喜欢一个CSS唯一的解决方案,但也许我必须使用JavaScript.
编辑：
因为我们找不到一个纯CSS的解决方案(并且使用：hover不是一个真正的解决方案),我现在正在寻找一些JavaScript行,将属性class =“focus”设置在正在编辑的节点上.
解决方法
我想我找到了一个解决方案.
使用以下代码片段,您可以在选择更改时在当前插入符号位置获取父元素.
var selectedElement = null;
function setFocus(e) {
if (selectedElement)
selectedElement.style.outline = 'none';
selectedElement = window.getSelection().focusNode.parentNode;
// walk up the DOM tree until the parent node is contentEditable
while (selectedElement.parentNode.contentEditable != 'true') {
selectedElement = selectedElement.parentNode;
}
selectedElement.style.outline = '1px solid #f00';
};
document.onkeyup = setFocus;
document.onmouseup = setFocus;
这里我手动更改大纲属性,但您可以添加一个类属性并通过CSS设置样式.
您仍然需要手动检查selectedElement是否为我们< div>具有contenteditable属性.但我想你可以得到基本的想法.
编辑：我更新了代码以及JSFiddle,使其在Firefox和Internet Explorer 9中工作.不幸的是,这些浏览器没有onselectionchange事件处理程序,所以我不得不使用onkeyup和onmouseup.
