Question

使用css，您可以使用

    [style="cursor:pointer"] {cursor:wait;}

但这只适用于设置内联的样式规则。当样式规则由外部样式表设置时，我想这样做。

here是一个评论很多的代码集示例。谢谢你们。

编辑：重要的是要知道我无法编辑html或外部样式表（我的示例中的第一个样式规则）我只能注入一个样式表。

Answer 1

上面的代码按预期工作，因为通过CSS对元素的更改实际上并不“操纵”元素本身，而是它们的外观。从本质上讲，CSS属性只关注DOM。让我为你分解一下：

页面上有两个元素，<input>。第一个输入的样式与style="cursor:pointer"内联。然后，您有以下两个CSS组件：

div [type="button"] {
  cursor: pointer;
}

[style="cursor:pointer"] {
  cursor: wait !important;
}

第一个输入跳过第一个规则，因为它不在<div>内。然后应用第二个规则，因为它在页面加载时被设置为指针光标（因为它是内联的）。

第二个元素应用第一个规则，因为它位于<div>内。您可能期望由于从上到下的CSS读取，它也将应用第二个规则。情况并非如此，因为CSS cursor属性更改通过 CSS规则应用，并且页面加载时不。因此，当加载CSS文件时，它仍然将其作为常规游标而不是指针游标读取。

如果您将第二种样式更改为：

input {
  cursor: wait !important;
}

您将看到第二个元素正确应用wait光标。这是因为当CSS规则开始应用时，第二个元素已经一个输入。

如果您想使用wait光标设置某组按钮的样式，同时排除其他按钮，处理此问题的最佳方法是使用class：

.wait {
  cursor: wait;
}

<input type="button" class="wait">

希望这有帮助！：）