是否存在光标处于元素内部时生效的CSS选择器？

好问题！CSS本身没有原生选择器能直接检测光标是否位于某个元素内部，不过我们可以通过JavaScript结合CSS类来实现这个效果——当光标落在span内部时，给它添加强粗样式，和你用:hover实现的效果类似，但触发条件换成光标位置。

实现方案 #

我们的核心思路是：监听光标/文本选择的变化事件，判断当前光标所在的元素是否是目标子元素（比如span），动态给它添加/移除样式类。

完整代码示例

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

<style>
div {
  caret-color: red;
}
/* 光标在span内时的样式 */
span.active {
  font-weight: bold;
}
</style>

<script>
const editableDiv = document.querySelector('[contenteditable="true"]');

// 监听光标移动或文本选择的变化
document.addEventListener('selectionchange', () => {
  // 先清除所有span的active类，避免样式残留
  editableDiv.querySelectorAll('span.active').forEach(el => el.classList.remove('active'));
  
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  
  const range = selection.getRangeAt(0);
  let targetEl = range.startContainer;
  
  // 如果光标在文本节点内，取它的父元素（也就是对应的span）
  if (targetEl.nodeType === Node.TEXT_NODE) {
    targetEl = targetEl.parentElement;
  }
  
  // 判断目标元素是否是我们要处理的span，并且属于当前可编辑区域
  if (targetEl.tagName === 'SPAN' && editableDiv.contains(targetEl)) {
    targetEl.classList.add('active');
  }
});
</script>

代码说明

1. CSS部分：定义span.active类来实现光标在内部时的加粗样式，保留你原来设置的红色光标。
2. JavaScript部分：
   • 监听全局的selectionchange事件，这个事件会在光标移动、文本选择/取消选择时触发，覆盖所有相关场景。
   • 每次触发事件时，先移除所有span的active类，避免多个span同时保留样式。
   • 获取当前的光标/选中范围，找到光标起始位置的节点：如果是文本节点（光标落在文字上时），就取它的父元素span；如果直接是span元素（比如光标刚好在元素边界），直接使用该元素。
   • 最后判断目标元素是否是我们要处理的span，并且属于当前可编辑区域，符合条件就添加active类。

这个方案能完美实现你想要的效果：当光标位于span内部时，span会自动加粗，光标移出后样式恢复。

内容的提问来源于stack exchange，提问作者Keith