带有!important的CSS光标被默认覆盖

Question

我有以下代码，将dragging-something类设置为触发器页面上的html元素。该类执行以下操作:

html.dragging-something {
    cursor: -moz-grabbing !important;
    cursor: -webkit-grabbing !important;
    cursor: grabbing !important;
}

一切正常，直到我将鼠标移动到另一个元素上，改变了光标。(像一个输入字段)

我如何使它使我的dragging-something类不会被任何其他可能改变光标的东西覆盖?

jsFiddle (Problem): https://jsfiddle.net/BoxMan0617/jndukr86/

jsFiddle(解决方案):https://jsfiddle.net/BoxMan0617/jxesdzqf/(感谢@humble.rumble)

(解决)

Answer 1

您需要将它应用于HTML标签中包含的元素，而不仅仅是HTML标签

html.dragging-something * {
    cursor: -moz-grabbing !important;
    cursor: -webkit-grabbing !important;
    cursor: grabbing !important;
}

Answer 2

我个人尽量避免经常使用!important。相反，我给规则的结构和特殊性一个机会:http://jsfiddle.net/vy599pa2/

<div class="move">
    <div class="pointer">
    </div>
</div>
<div class="pointer">

div {
    width: 150px;
    height: 150px;
    padding: 30px;
    background-color: grey;
    border: 2px solid black;
}
div div {
    padding: 0;
    background-color: lightblue;
}
div + div {
    margin-top: 10px;
}
.pointer,
.pointer * {
    cursor: pointer;
}
.move,
.move * {
    cursor: move;
}