如何使用CSS选择器匹配包含用户选中文本的DIV元素？

目前没有原生CSS选择器能直接检测元素内部是否存在用户选中的文本，你设想的:has()结合选中状态的写法暂时无法实现——因为CSS没有对应伪类来匹配用户选中的文本片段。

要实现这个需求，需要结合JavaScript和CSS来完成，步骤如下：

• 用JS监听用户选中文本的selectionchange事件
• 每次选中状态变化时，判断选中文本所在的容器是否为DIV
• 给符合条件的DIV添加自定义类名，再通过CSS针对该类设置样式

代码示例 #

CSS 样式

/* 自定义类，用于标记包含选中文本的DIV */
.has-selected-text {
  border: 2px solid #f06;
  background-color: #fff5f8;
}

JavaScript 逻辑

// 监听选中文本变化事件
document.addEventListener('selectionchange', function() {
  // 先移除所有DIV上的标记类
  document.querySelectorAll('.has-selected-text').forEach(div => {
    div.classList.remove('has-selected-text');
  });

  const selection = window.getSelection();
  // 如果没有选中内容或选中范围折叠，直接返回
  if (!selection.rangeCount || selection.isCollapsed) return;

  const range = selection.getRangeAt(0);
  // 获取选中内容所在的最近的DIV容器
  const targetDiv = range.commonAncestorContainer.closest('div');
  
  // 如果找到对应的DIV，添加标记类
  if (targetDiv) {
    targetDiv.classList.add('has-selected-text');
  }
});

补充说明 #

• 这段代码会自动在用户选中文本时，给包含选中文本的最近DIV添加样式类；取消选中时，会移除所有DIV的标记类
• 如果需要精确匹配（比如只选中直接包含选中文本的DIV，而非其祖先DIV），可以调整closest('div')的逻辑，或者额外检查选中范围是否完全包含在该DIV内部

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