getComputedStyle 无法获取伪类（如 :hover）样式，因其仅作用于当前渲染状态；但可获取伪元素（::before/::after）样式，需传入第二个参数 ':before' 或 ':after'。
getComputedStyle 不能直接获取伪类（如 :hover、:focus、:active）的样式，因为它只作用于**当前已渲染并处于特定状态的元素**，而伪类样式只有在用户交互（如悬停、点击）时才临时生效，JS 无法主动“触发”或“模拟”这些状态来读取其样式。
能用 getComputedStyle 获取的是伪元素样式（:before / :after）
注意区分：伪类（pseudo-classes）和伪元素（pseudo-elements）是两类不同概念：
-
伪类：描述元素的动态状态，如
:hover、:disabled、:nth-child(2)—— 无法通过 getComputedStyle 读取 -
伪元素：表示元素的抽象子部分，如
::before、::after、::first-line—— 可以读取（需传入第二个参数）
正确获取 ::before / ::after 的样式
调用 window.getComputedStyle(element, pseudoElt)，第二个参数传入字符串 ':before' 或 ':after'（注意单冒号兼容写法，现代浏览器也支持双冒号但部分旧环境要求单冒号）：
const el = document.querySelector('.my-btn');
const beforeStyle = window.getComputedStyle(el, ':before');
console.log(beforeStyle.content); // '"▶"'
console.log(beforeStyle.color); // 'red'
⚠️ 前提是该元素实际渲染了伪元素（即 CSS 中定义了 content，且未被 display: none 等隐藏）。
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“Java免费学习笔记（深入）”；
为什么 hover 等伪类样式读不到？
因为 getComputedStyle 读取的是浏览器当前**真实渲染树中的计算值**。当鼠标没悬停时，:hover 规则根本不参与样式计算，自然没有对应值。JS 无法强制让元素进入 :hover 状态来测量。
变通方法（不推荐用于生产）：
- 临时给元素加一个 class 模拟 hover 效果（如
.my-btn.is-hovered），再用getComputedStyle读取该 class 下的样式 - 在 CSS 中预先定义好 hover 样式对应的 class，用 JS 切换 class 后测量（需注意重排/重绘时机，建议用
getComputedStyle在下一帧调用）
检查伪元素是否存在 & 内容是否生效
伪元素若 content: none、content: "" 或父元素 display: none，则 getComputedStyle(el, ':before') 返回的仍是 CSSStyleDeclaration，但属性值可能为空或默认值。可检查关键属性：
-
beforeStyle.content是否为'none'或空字符串 -
beforeStyle.display是否为'none' - 确保目标元素已挂载到 DOM 且已触发样式计算（避免在
DOMContentLoaded前过早读取）
