当父元素设置 pointer-events: none 时，其伪元素（如 ::before/::after）默认继承该属性，导致 cursor: not-allowed 无法生效；需显式重置伪元素的 pointer-events: auto 并配合布局技巧实现预期禁用态光标效果。
当父元素设置 `pointer-events: none` 时，其伪元素（如 `::before`/`::after`）默认继承该属性，导致 `cursor: not-allowed` 无法生效；需显式重置伪元素的 `pointer-events: auto` 并配合布局技巧实现预期禁用态光标效果。
在 CSS 中，pointer-events 是一个可继承属性。这意味着，当你为某个元素（例如按钮）设置 pointer-events: none 时，其所有后代节点（包括伪元素 ::before 和 ::after）都会默认继承该值 —— 即使伪元素是绝对定位、覆盖在父元素之上，它依然“不响应任何鼠标事件”，自然也无法触发 cursor 样式。
因此，以下写法不会生效：
.pointer-events-none {
position: relative;
pointer-events: none; /* ← 父级禁用交互 */
}
.pointer-events-none::after {
content: "";
position: absolute;
top: 0; left: 0;
width: 100% !important;
height: 100% !important;
cursor: not-allowed; /* ❌ 无效：因继承了 pointer-events: none */
}✅ 正确解法是：在伪元素中显式声明 pointer-events: auto，使其重新获得鼠标事件捕获能力，从而让 cursor 生效：
.pointer-events-none {
position: relative;
pointer-events: none;
}
.pointer-events-none::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
cursor: not-allowed;
pointer-events: auto; /* ✅ 关键修复：重获鼠标事件控制权 */
}⚠️ 但需注意：此方案仅改变光标样式，并不阻止原生点击行为。因为 pointer-events: none 应用于父按钮本身，其子元素（含伪元素）虽能捕获鼠标悬停，但点击仍可能穿透至底层或触发浏览器默认行为（尤其在 <button></button> 上，部分浏览器仍会响应 click）。实测中，上述 .pointer-events-none 按钮点击后仍可能执行 onclick 回调。
更健壮的替代方案
✅ 推荐方案 1：使用原生 disabled 属性
语义正确、兼容性好、无需额外 CSS（现代浏览器自动应用 cursor: not-allowed）：
button[disabled] {
cursor: not-allowed;
}<button disabled onclick="console.log('clicked')">Some Text</button>✅ 优点：符合无障碍标准（ARIA 友好）、自动禁用表单提交与焦点、样式可控。
❌ 缺点：会改变默认样式（如灰阶、透明度），若需保留原始视觉风格，需手动重置background、color、border等。
✅ 推荐方案 2：容器隔离法（无状态变更）
通过外层容器控制光标，并将 pointer-events: none 移至子按钮，避免父级干扰：
.button-disabled {
display: inline-block;
cursor: not-allowed; /* ✅ 光标作用于容器 */
}
.button-disabled > button {
pointer-events: none; /* ✅ 真正禁用按钮交互 */
/* 可选：重置按钮自身样式以匹配正常态 */
background: inherit;
border: inherit;
color: inherit;
}<div class="button-disabled">
<button onclick="console.log('clicked')">Some Text</button>
</div>✅ 优势：完全保留按钮视觉表现，光标精准、点击彻底失效，且无需修改 HTML 结构（仅包裹一层
<div>）。<h3>总结</h3> <ul> <li> <code>cursor生效的前提是元素能参与鼠标事件流，而pointer-events: none会阻断该流程；伪元素无法绕过继承机制，必须显式设置 pointer-events: auto才能使cursor生效；若目标是「视觉禁用 + 功能禁用」，优先使用 disabled属性；若需自定义禁用样式且保持按钮外观一致，推荐「容器 + 子按钮隔离」模式，兼顾语义、兼容性与可控性。
