是否存在针对JavaScript修改节点的CSS伪类选择器？

首先明确：没有原生CSS伪类可以直接检测节点内容被修改。CSS伪类主要针对元素的状态（如:hover、:focus）或DOM结构（如:first-child、:nth-of-type），没法监听元素内部文本的动态变化。

你可以通过「JS修改文本时给元素添加临时类，触发过渡后再移除类」的方式实现需求，具体代码如下：

HTML #

<div>希望下方绿色文本在修改时变红，之后再变回绿色。</div>
<div id="bob">azerty</div>
<button onclick="myfunc();">点击修改</button>

CSS #

#bob {
    color: green;
    transition: color 1s; /* 明确过渡属性，比all更高效 */
}
#bob.text-updated {
    color: red;
}

JavaScript #

function myfunc(){
    const bob = document.getElementById("bob");
    // 先添加触发过渡的类
    bob.classList.add('text-updated');
    // 修改文本内容
    bob.innerText += "azerty";
    // 等待过渡完成后移除类，回到原样式
    setTimeout(() => {
        bob.classList.remove('text-updated');
    }, 1000); // 时间和CSS过渡时长保持一致
}

原理说明 #

CSS过渡需要「样式从一个状态切换到另一个状态」的触发条件。这里通过JS主动给元素添加text-updated类，让颜色从绿色切换到红色，触发过渡动画；等过渡完成（1秒后）再移除类，颜色又变回绿色，完成整个效果。

如果需要更精准的过渡结束时机，也可以用transitionend事件代替定时器，避免定时器和过渡时长不同步的问题，示例如下：

function myfunc(){
    const bob = document.getElementById("bob");
    bob.classList.add('text-updated');
    bob.innerText += "azerty";
    
    // 监听过渡结束事件
    function handleTransitionEnd() {
        bob.classList.remove('text-updated');
        bob.removeEventListener('transitionend', handleTransitionEnd);
    }
    bob.addEventListener('transitionend', handleTransitionEnd);
}

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