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

我有一个

contenteditable

元素，我希望里面的元素在插入符号在里面时应用样式

在本例中，样式在

：hover

上更改：

div{
插入符号颜色：红色；
}
跨度：悬停{
字体大小：粗体；
}

子元素一
文本节点
次级要素二

我认为需要一种不同的方法。由于编辑需要单击元素，我只需要在子元素上设置一个

click

事件处理程序来设置它们的样式

//获取对contenteditable元素的引用
var container=document.querySelector（“[contenteditable='true']”）；
//为容器设置单击事件处理程序
container.addEventListener（“单击”，函数（evt）{
//循环子元素并移除活动类
Array.prototype.slice.call（container.queryselectoral（“*”））.forEach（函数（el）{
el.类列表。删除（“活动”）；
});
//将活动类应用于单击的元素
evt.target.classList.add（“活动”）；
});
.active{
字体大小：粗体；
}

子元素一
文本节点
次级要素二
使用CSS？

不，没有用于此的
css
选择器

使用JavaScript？

是的，您可以通过
JavaScript
使用函数来实现这一点

使用可以获得插入符号的当前位置，并且插入符号的
元素
处于启用状态

window.getSelection（）

返回表示用户所选文本范围的选择对象
或插入符号的当前位置


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


var ctl=document.getElementById（'contenteditable'）；
var选择；
函数styleNode（）{
//获取选择/插入符号位置
selection=window.getSelection（）；
//检查类型是否为插入符号而不是范围（选择）
if（selection.type==='Caret'）{
//删除样式
[…selection.focusNode.parentElement.parentElement.getElementsByTagName（“span”）].forEach（child=>child.style.fontwweight=“normal”）；
//仅限样式元素
if（selection.focusNode.parentElement.tagName==='SPAN'）{
//设置插入符号所在元素的样式
selection.focusNode.parentElement.style.fontwweight=“bold”；
}
}
}
//移除焦点输出上的样式
const reset=（）=>[…ctl.getElementsByTagName（“span”）].forEach（child=>child.style.fontwweight=“normal”）；
ctl.addEventListener（“keyup”，styleNode）；
ctl.addEventListener（“单击”，样式节点）；
ctl.addEventListener（“聚焦输出”，重置）

这是一些可编辑的内容
哪个插入符号？我不明白。@Red，当你在编辑时，光标
在span@Huangism但是，您将失去所有用户之间的导航text@TemaniAfif你不需要，它会像文本一样导航，我在FF上试过，但当光标在输入中时，焦点似乎不会触发，所以这不好。我认为这必须使用JSF，到目前为止，还没有CSS选择器可以单独完成这项工作。JS解决了一个类似的问题：干杯，类似的事情对我来说很有用。我需要的一个更改是
keyup
而不是
keydown
，以确保选择检查发生在插入符号更改之后（请尝试使用箭头键导航代码段，并且在移动中更改发生在相关的更改之后，因为在
keydown
上插入符号仍然位于原始位置）很高兴我能帮你指出正确的方向。祝您有个美好的一天！这个答案的前半部分是关于鼠标光标的，而下半部分是基于文本插入符号的解决方案。我想这里可能有些混乱。还有一件事：焦点与鼠标的关系是，你可以点击某些元素来聚焦它们。@BoltClock我同意你的反馈，并提供了一个简单的答案，直截了当。谢谢你，伙计！
window.getSelection().focusNode.parentElement // Returns DOM node