如果您有以下HTML：
<div contenteditable="true">
<p>The first paragraph</p>
<p>The second paragraph</p>
</div>
有没有办法设置正在编辑的段落与其他段落的不同 div 那是 contenteditable？
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;
我在这里改变了 outline 手动属性，但你当然可以添加一个类属性并通过CSS设置样式。
您仍然需要手动检查是否 selectedElement 是我们的孩子 <div> 随着 contenteditable 属性。但我认为你可以得到基本的想法。
这是 更新了JSFiddle。
编辑：我更新了代码以及JSFiddle，使其可以在Firefox和Internet Explorer 9+中使用。不幸的是，这些浏览器没有 onselectionchange 事件处理程序，所以我不得不使用 onkeyup 和 onmouseup。
有趣的问题。如果它可行，我建议将contenteditable属性移动到 p他们自己： http://codepen.io/pageaffairs/pen/FHKAC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div > p:focus {outline: 1px solid red; }
</style>
</head>
<body>
<div>
<p contenteditable="true">The first paragraph</p>
<p contenteditable="true">The second paragraph</p>
</div>
</body>
</html>
编辑：这是另一个版本，导致para返回生成para而不是div： http://codepen.io/pageaffairs/pen/dbyIa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div:focus {outline: none;}
div > p:focus, div > p:hover {outline: 1px solid red; }
</style>
</head>
<body>
<div contenteditable="true">
<p contenteditable="true">The first paragraph</p>
<p contenteditable="true">The second paragraph</p>
</div>
</body>
</html>
以下是不完美的，因为您的鼠标需要与所选段落位于同一区域（以保持 :hover 参数是真的），但通常情况下这应该是好的 - 如果你想保留你的标记，那么你将获得最好的结果：
CSS：
div[contenteditable="true"]:focus > p:hover {
border: 2px solid red;
}
HTML：
<div contenteditable="true">
<p>The first paragraph</p>
<p>The second paragraph</p>
</div>
如果您能够更改标记，则可以使用以下简化选择器：
CSS：
p[contenteditable="true"]:focus {
border: 2px solid red;
}
HTML：
<div>
<p contenteditable="true">The first paragraph</p>
<p contenteditable="true">The second paragraph</p>
</div>