contenteditable="true"父元素下CSS :active伪类失效问题及解决办法咨询

在contenteditable="true"的div容器内，<a>标签的:active伪类无法正常生效——:hover和:focus伪类能按预期切换为蓝色，但点击链接时，:active对应的红色样式完全没反应。

复现代码如下：

HTML代码 #

<div contenteditable="true">
  interesting
  <a href="https://google.com">link</a>
</div>

CSS代码 #

a {
  color: green;
}

a:hover, a:focus {
  color: blue;
}

a:active {
  color: red;
}

这是浏览器对contenteditable容器的事件处理逻辑导致的：当容器处于可编辑状态时，点击操作会被容器的编辑行为优先拦截，<a>标签无法正常捕获到:active状态的触发时机。

方案1：阻止链接的mousedown事件冒泡 #

通过JS阻止链接上的mousedown事件向父容器冒泡，让链接能正常触发:active状态：

document.querySelector('div[contenteditable="true"] a').addEventListener('mousedown', function(e) {
  e.stopPropagation();
});

添加这段代码后，点击链接时事件不会被可编辑容器拦截，:active的红色样式就能正常生效。

方案2：用JS手动模拟:active状态 #

如果不想依赖事件阻止逻辑，可以通过自定义类模拟:active的效果：
先修改CSS，新增自定义类：

a {
  color: green;
}

a:hover, a:focus {
  color: blue;
}

a:active, a.active-state {
  color: red;
}

再添加JS事件监听：

const link = document.querySelector('div[contenteditable="true"] a');

link.addEventListener('mousedown', () => {
  link.classList.add('active-state');
});

// 鼠标松开、离开或失去焦点时移除类
['mouseup', 'mouseleave', 'blur'].forEach(event => {
  link.addEventListener(event, () => {
    link.classList.remove('active-state');
  });
});

方案3：将链接移出可编辑容器（业务允许的话） #

如果编辑需求不需要包含这个链接，直接把<a>标签放到contenteditable="true"的div外面，:active伪类就能正常工作，无需额外代码修改。

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