css中同一个元素上应用 `pointer-events: none !important；` 和 `cursor: not-allowed !important；` 时产生冲突的原因和解决办法

当你同时在一个元素上应用 pointer-events: none !important; 和 cursor: not-allowed !important; 时，cursor: not-allowed 可能会失效。这是因为 pointer-events: none 禁用了该元素的所有鼠标事件，而包括鼠标光标在内的许多浏览器行为依赖于鼠标事件来触发。因此，禁用 pointer-events 后，浏览器不会再触发与该元素相关的光标效果。

详细讲解

1. pointer-events: none 的作用

pointer-events 是一个 CSS 属性，用于控制鼠标事件是否可以作用于该元素。设置为 none 后，元素不再响应任何鼠标事件，如点击、拖动、悬停等，也不会触发任何与鼠标相关的样式变化（包括光标变化）。

.element {
   
   
  pointer-events: none; /* 禁用鼠标事件 */
  background-color: red; /* 只是为了让元素可见 */
}

此时，无论鼠标悬停在 .element 元素上，光标都不会发生变化，因为鼠标事件已经被禁用。

2. cursor: not-allowed 的作用

cursor: not-allowed 通常用来显示一个“不允许”图标的光标，通常应用在禁用或不可交互的元素上。

.element {