Question

如果您有以下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> - 标记）的样式？

我更喜欢仅使用CSS的解决方案，但也许我必须使用JavaScript。

修改

由于我们找不到纯CSS解决方案（使用:hover对我来说不是一个真正的解决方案）我现在正在寻找一些在节点上设置属性class="focus"的JavaScript行。正在编辑。

Answer 1

我想我找到了解决方案。

使用以下代码片段，您可以在选择更改时获取当前插入符号位置的父元素。

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属性的孩子。但我认为你可以得到基本的想法。

这是 updated JSFiddle 。

编辑：我更新了代码以及JSFiddle，使其可以在Firefox和Internet Explorer 9+中运行。不幸的是，这些浏览器没有onselectionchange事件处理程序，因此我必须使用onkeyup和onmouseup。

Answer 2

有趣的问题。如果它可行，我建议将contenteditable属性移到p s：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>

Answer 3

jsFiddle here.

以下是不完美的，因为您的鼠标需要与所选段落位于同一区域（以使: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>

jsFiddle here.

如果您能够更改标记，则可以使用以下简化选择器：

<强> 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>

CSS ::元素的焦点在于满足

3 个答案: