javascript - 当插入符号在元素中时，是否有 CSS 选择器？

我有一个 contenteditable 元素，我希望里面的元素在插入符号位于其中时应用样式。
在这个例子中，:hover 的样式发生了变化:

div{
caret-color: red;
}

span:hover {
  font-weight:bold;
}

<div contenteditable="true">
  <span>Sub element one</span>
  text node
  <span>sub element two</span>
</div>

在这里您可以看到插入符号，因为我将其设置为红色，但我已将鼠标悬停在另一个 span 上:

有没有办法应用这样的样式，但是当插入符号在元素内部时？那么红线周围的span中的文字是粗体的？
解决方案如下所示:

CSS 解决方案是理想的，但如果不可能，我会考虑 JS 解决方案。

最佳答案

使用 CSS？
不，没有 css 选择器。
使用 JavaScript？
是的，您可以使用 JavaScript 函数使用 .getSelection() 执行此操作。
使用 .getSelection() 您可以获得插入符号的当前位置和插入符号所在的 element。

window.getSelection().focusNode.parentElement // Returns DOM node

因此，使用此信息，您可以创建一个函数来设置插入符号所在元素的样式

var ctl = document.getElementById('contenteditable');
var selection;

function styleNode() {
  // Get selection / caret position
  selection = window.getSelection();

  // Check if type is Caret and not Range (selection)
  if(selection.type === 'Caret') {
    // Remove styles
    [...selection.focusNode.parentElement.parentElement.getElementsByTagName( "span" )].forEach( child => child.style.fontWeight = "normal" );

    // Only style <span> elements
    if(selection.focusNode.parentElement.tagName === 'SPAN') {
      // Set style on element where caret is
      selection.focusNode.parentElement.style.fontWeight = "bold";
    }
  }
}

// Removes styles on focusout
const reset = () => [...ctl.getElementsByTagName( "span" )].forEach( child => child.style.fontWeight = "normal" );

ctl.addEventListener("keyup", styleNode);
ctl.addEventListener("click", styleNode);
ctl.addEventListener("focusout", reset);

<div contenteditable id="contenteditable">
  <span>This is</span> some editable <span>content</span>
</div>

关于javascript - 当插入符号在元素中时，是否有 CSS 选择器？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49923195/