能否通过CSS选择器实现HTML值变更时的抖动样式效果？

首先明确：目前没有原生CSS选择器能直接检测元素内容的变化，你写的.button:change这种语法并不存在于CSS标准中。要实现值更新时的抖动效果，必须结合JavaScript来触发CSS动画，下面是几种实用方案：

方案1：手动触发动画（可控更新场景） #

如果是你的代码主动修改元素内容（比如点击按钮更新数值），可以在更新内容的同时给元素加一个动画类，动画结束后再移除它，确保下次更新还能触发：

CSS 动画定义 #

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
  animation: shake 0.5s ease-in-out;
}

JavaScript 触发逻辑 #

// 目标元素和触发按钮
const valueBox = document.querySelector('.value-box');
const updateBtn = document.querySelector('.update-btn');

updateBtn.addEventListener('click', () => {
  // 更新内容（示例：随机数）
  valueBox.textContent = Math.floor(Math.random() * 100);
  // 触发抖动
  valueBox.classList.add('shake');
  // 动画结束后移除类
  setTimeout(() => valueBox.classList.remove('shake'), 500);
});

方案2：自动监听内容变化（不可控更新场景） #

如果内容是由第三方脚本或其他你无法直接控制的逻辑更新的，可以用MutationObserver监听元素的内容变化，自动触发动画：

JavaScript 监听逻辑 #

const valueBox = document.querySelector('.value-box');

// 创建观察者实例
const contentObserver = new MutationObserver((mutations) => {
  mutations.forEach(() => {
    // 内容变化时触发抖动
    valueBox.classList.add('shake');
    setTimeout(() => valueBox.classList.remove('shake'), 500);
  });
});

// 配置监听：追踪元素的子节点变化（包含文本内容）
contentObserver.observe(valueBox, {
  childList: true,
  subtree: true
});

方案3：表单元素专属处理 #

如果是<input>、<textarea>这类表单元素的值变化，可以直接监听input事件来触发动画，逻辑更简单：

const inputField = document.querySelector('input');

inputField.addEventListener('input', () => {
  inputField.classList.add('shake');
  setTimeout(() => inputField.classList.remove('shake'), 500);
});

内容的提问来源于stack exchange，提问作者Stéphane GROSSMANN