我有一个用于我的网站的自定义光标图像，但仅用于default状态。在其他情况下(特别是对于text)，我想要预定义的。
但是如果我这样定义自定义光标。。。
html {
cursor: url('path/to/custom/cursor.svg') 0 0, default;
}
至少text状态丢失了(不是pointer，但我怀疑其他状态也丢失了)，我的段落、带文本的跨度、标题等现在显示的是我的自定义光标，而不是预定义的文本选择器。
当然，我可以重新定义某些元素的样式。。。
p, span, ol, ul, h1, h2, h3, h4 {
cursor: text;
}
但text状态并没有真正链接到某些html标签，当有一个文本节点不受其他修饰符的影响时，它就会出现。例如，我怎么能只针对一个只有文本的div，而排除一个只包含另一个特定颜色、背景等的div。？
正如我在这个问题中看到的，没有一种方法可以直接针对文本节点，所以我想知道是否有一种侵入性较小的方法可以定义自定义光标，在预定义的默认光标出现的情况下，仅，并且仍然按每个修改的状态显示所有预定义的光标(text、scroll等)
提前谢谢。
示例1：如果定义了html光标，则全部覆盖：
html {
cursor: all-scroll;
}Lorem ipsum dolor sit amet示例2：如果我们试图重新定义一些元素，我们现在有误报。。。
html {
cursor: all-scroll;
}
/* Dillema: Which elements should be redefined to target predefined text status?? */
div {
cursor: text;
}<div>Lorem ipsum dolor sit amet</div>
<div style="width: 100px; height: 100px; background-color: red;"></div>TL；DR
您不能严格更改cursor: default;的含义，但您可以根据需要设置任何元素的cursor样式。
因此，如果你想处理一些特定的元素或元素类型，你应该用细粒度的选择器(如：.classname{cursor: all-scroll;}或elementtype{cursor: all-scroll;})来选择它们，精确定位元素，但对于具有给定值的给定属性的元素，没有选择器。
如果你想变得狂野，你可以在js:中做
//for every single element in the dom,
document.querySelectorAll('*')
//sets the cursor property to all-scroll if its current value is default
.foreach(el=>{ if (el.style.cursor === 'default') el.style.cursor = 'pointer'})
设置文档中每个html元素的样式属性，使其具有最大优先级。
但要通过css获取所有内容，这就足够*{cursor: pointer;}了
如果您执行html{cursor: all-scroll;}，您将不会被授予每个元素都将被设置为这样的样式，因为某些元素类型不会从其父/祖先继承光标属性值，并且当鼠标在其上时，其样式将优先于底层的html"；画布"；。
无论如何，在这种情况下，您至少应该将html高度设置为100%，以确保该规则至少会在顶层没有其他元素覆盖行为时触发
在我的演示中，我展示了两种策略，我很容易地演示了这样一个事实，即表单元素不是从父祖先继承的，并且当使用*应用规则时，它会占用所有的元素。
整个故事：
以下是关于cursorcss属性的mdn文档：
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
cursor CSS属性设置鼠标光标(如果有的话)，以便在鼠标指针位于某个元素上。
光标设置应通知用户鼠标操作可以在当前位置执行，包括：文本选择，激活帮助或上下文菜单、复制内容、调整表格大小，等等。您可以使用关键字指定光标的类型，或加载要使用的特定图标(具有可选的回退图像和强制关键字作为最终回退)。
很明显，当鼠标指针位于样式类似的元素上时，这样的属性会影响光标。因此，要影响根保护伞下的每个元素，对整个<html>元素进行样式设置就足够了，但确保可见高度覆盖实际视口也很重要！
这就是为什么它是一个解决方案，例如使用html { height: 100% }。
需要注意的是，html文档总是有一个根元素，即<html>。任何文本内容始终是textNode，在页面中找到它的任何位置都始终是某个节点的内容，最坏的情况下，它是body元素中的子节点。到目前为止，我所说的可能是忽略来自contentcss属性的文本(但让我们假设它不存在)。
因此，你当然不能对文本本身进行样式设置，但你可以对包含它的元素进行样式设置。因为总有这样一个元素，因此总有一个选择器可以用来对给定的文本进行样式设置——它肯定会包含在你可以寻址的某个元素中。唯一需要注意的是，您不能将样式仅限于文本，而仅限于要进行样式设置的元素的整个内容。
现在唯一需要知道的是，一些元素将具有一些css属性的默认值，这些属性将覆盖父元素上设置的任何值。这是因为css规范是如何工作的，以及一些属性是如何从祖先那里继承的。
我做了一个演示，其中包括几个html元素类型。
另外还有两个按钮：
Toggle custom cursor on html-这将切换css类在html元素上自定义.customcursor(该规则在文档中预定义为.customcursor{cursor: all-scroll !important;})Toggle custom cursor on *-这将添加/删除一个css规则，该规则将把cursorcss属性设置为DOM中的ALL元素(*{cursor: all-scroll !important;.我这样做的原因是让css负责选择所有元素，而不是将js与querySelectorAll一起使用)
值得指出的是，我使用!important来表明，对于那些不从父级继承的元素类型，覆盖cursor属性是不够的。
- 当您在
html上设置customcursor时，您将看到除表单元素外，所有元素都进行了自定义 - 当您设置针对所有元素的规则时影响所有内容，并且该光标将是您唯一看到的光标同时将鼠标悬停在整个页面视口上
//create the empty stylesheet on document loaded
var styleSheet;
document.addEventListener('DOMContentLoaded',()=>{
const styleEl = document.createElement('style');
document.head.appendChild(styleEl);
styleSheet = styleEl.sheet;
});
function toggleCustomCursorOnBody(btn){
const cb = btn.querySelector('input');
document.querySelector('html').classList.toggle('customcursor');
cb.checked = !cb.checked;
}
function toggleCssRuleOnAllElements(btn){
const cb = btn.querySelector('input');
if(!cb.checked)
addCssRule();
else
removeCssRule();
cb.checked = !cb.checked;
}
function addCssRule(){
styleSheet.insertRule('*{cursor: all-scroll !important;}', 0);
}
function removeCssRule(){
styleSheet.deleteRule(0);
}html {
border: solid 18px purple; /*<--this is to show the size of the element we are setting cursor for! */
background: lightgoldenrodyellow;
height: calc(100% - 36px); /*<--this was what I pointed out in comments */
}
.customcursor{
cursor: all-scroll !important;
}
/*the following just to give consistence to the page elements*/
[data-label]::before{
content: attr(data-label);
padding-right: 1em;
font-weight: 600;
padding: 0 .2em;
font-size: 1rem;
background-color: #FECE44;
color: #333;
width: 100%;
max-height: 1.2rem;
}
.toggles{
margin: 0 auto 1em auto;
}
.toggle{
cursor: pointer;
padding: .5em 1em;
}
.toggle > input[type="checkbox"]{
pointer-events: none;
}
body{
font-size: 18px;
text-align: center;
}
*{
box-sizing: box-model;
border: dotted 1px lightgray;
}
.container,
form
{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 2vmin;
}
body > .container{
margin-top: 2vh;
}
.container > h1,
.container > h2,
.container > h3,
.container > h4,
.container > h5,
.container > h6
{
margin: 0;
max-height: 10vh;
}
.container > h1{
background: rgba(204, 204, 204, 1);
}
.container > h2{
background: rgba(204, 204, 204, 0.9);
}
.container > h3{
background: rgba(204, 204, 204, 0.8);
}
.container > h4{
background: rgba(204, 204, 204, 0.7);
}
.container > h5{
background: rgba(204, 204, 204, 0.6);
}
.container > h6{
background: rgba(204, 204, 204, 0.5);
}
.container > p{
background-color: lime;
font-size: 2rem;
margin: 0;
}
.container > ol{
background-color: cyan;
font-size: 1rem;
padding: .5em 1em .5em 1.5em;
margin: 0;
height: fit-content;
}
.container > a{
background: antiquewhite;
font-size: 2rem;
height: fit-content;
margin: 0;
}
.container > div:not(.container):not(.unstyled) {
width: 20vw;
height: 5vh;
background: dodgerblue;
color: white;
padding: 1em;
font-weight: 600;
font-size: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
}
.container > span {
width: 20vw;
height: 5vh;
background: cadetblue;
color: white;
padding: 1em;
font-weight: 600;
font-size: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
}
.container > textarea{
width: 15ch;
height: 10vh;
}
.container > label{
outline: solid 1px gray;
padding: .2em 1em;
background: gray;
color: white;
max-height: 1em;
}
.container > select{
max-height: 2em;
}
.container > input{
}
.container > input[type="text"]{
width: 15ch;
max-height: 1em;
font-size: 1rem;
padding: .5rem .5rem;
}
.unstyled input[type="checkbox"]{
position: relative;
width: 2em;
height: 2em;
}
.unstyled input[type="checkbox"] + label{
}<body>
<div class="toggles">
<button id="toggle1" class="toggle" onclick="toggleCustomCursorOnBody(this);">
Toggle custom cursor on <html>
<input type="checkbox">
</button>
<button id="toggle2" class="toggle" onclick="toggleCssRuleOnAllElements(this);">
Toggle custom cursor on *
<input type="checkbox">
</button>
</div>
[THIS IS A TEXT NODE HAVING FONT SIZE FROM BODY]
<div class="container">
<div class="container" data-label="headings">
<h1><h1></h1>
<h2><h2></h2>
<h3><h3></h3>
<h4><h4></h4>
<h5><h5></h5>
<h6><h6></h6>
</div>
<div class="container" data-label="contents">
<p><p></p>
<ol>
<li><ol> <li></li>
<li><ol> <li></li>
<li><ol> <li></li>
</ol>
<a href="#"><a></a>
</div>
<div class="container" data-label="layout">
<div><div></div>
<span><span></span>
</div>
<form class="container" data-label="form">
<label><label></label>
<input type="text" value="<input type=text>">
<textarea><textarea></textarea>
<div class="unstyled">
<input type="checkbox">
<label><input cb></label>
</div>
<select>
<option disabled selected><select>...</option>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<fieldset>
<legend><legend></legend>
<div>
<input type="radio" checked>
<label><radio></label>
</div>
<div>
<input type="radio" checked>
<label><radio></label>
</div>
<div>
<input type="radio" checked>
<label><radio></label>
</div>
</fieldset>
</form>
</div>
</body>