:playing伪类目前无法在任何主流浏览器中使用，因仍处于CSS Selectors Level 4草案阶段，Chrome、Firefox、Safari和Edge均未实现；需用JavaScript监听play/pause/ended事件并手动切换class来模拟播放态样式。
:playing 伪类目前**无法在任何主流浏览器中使用**——它仍处于 CSS Selectors Level 4 草案阶段，尚未被 Chrome、Firefox、Safari 或 Edge 实现。直接写 :playing 不会生效，也不会触发样式变化。
为什么 :playing 现在用不了
虽然规范已定义该伪类用于匹配正在播放的 <video></video> 或 <audio></audio> 元素，但所有浏览器厂商都未落地支持。你在 DevTools 里检查元素，看不到该伪类被匹配；写上样式也完全不会应用。
- Chrome（包括 120+）：无实现，
:playing被忽略 - Firefox（120+）：不识别，控制台可能报“unknown pseudo”警告
- Safari（17.2+）：未列入支持列表，实测无效
- Can I Use 数据明确标为 「No support」
替代方案：用 JavaScript + class 控制播放态样式
最可靠的做法是监听媒体元素的 play 和 pause 事件，手动切换自定义 class：
<video id="myVideo" src="demo.mp4"></video><style>
video.is-playing { outline: 2px solid #007aff; }
video:not(.is-playing) { opacity: 0.8; }
</style><script>
const vid = document.getElementById('myVideo');
vid.addEventListener('play', () => vid.classList.add('is-playing'));
vid.addEventListener('pause', () => vid.classList.remove('is-playing'));
vid.addEventListener('ended', () => vid.classList.remove('is-playing'));
</script>
- 必须监听
ended事件，否则视频播完仍保持is-playing状态 - 若支持自动播放（如静音视频），
play事件可能在页面加载时立即触发，需确保 class 初始状态正确 - 避免重复添加/移除：用
classList.add()和classList.remove()是安全的，无需先判断
注意 media 的“播放中”定义比直觉更复杂
浏览器对“正在播放”的判定不只看是否调用了 play()：
- 调用
play()后若因策略被暂停（如用户未交互就自动播放），paused属性仍为true，不会触发play事件 - 缓冲中但未解码完成时，
readyState ，此时即使 <code>paused === false，实际也未真正播放 - 使用
playbackRate = 0时，paused为false，但画面/声音完全静止——你大概率不想把它当“播放中”处理
所以，仅靠 paused 属性或事件还不够健壮；真实项目中建议结合 playbackRate > 0、readyState >= 3 和 currentTime > 0 综合判断，再更新 class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
