我的网站有一个自定义光标图像，但仅用于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 的 div？
正如我在这个问题中看到的，没有一种方法可以直接定位文本节点，所以我想知道是否有一种侵入性较小的方法来定义自定义光标，仅在预定义的默认光标出现的情况下，并且仍然显示所有预定义的每个修改状态的游标（text、scroll等）
先感谢您。
示例 1：如果定义了 html 光标，则所有内容都将被覆盖：
html {
cursor: url('path/to/custom/cursor.svg') 0 0, default;
}
p, span, ol, ul, h1, h2, h3, h4 {
cursor: text;
}
示例 2：如果我们尝试重新定义某些元素，我们现在就会出现误报...
html {
cursor: all-scroll;
}Lorem ipsum dolor sit amet您不能严格更改 的含义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%，以确保当顶层没有其他元素覆盖该行为时，该规则至少会触发。
在我的演示中，我展示了两种正在发挥作用的策略，并且我轻松地演示了这样一个事实：表单元素不会从父祖先继承，并且当使用 来应用规则时*，它会采取一切。
这是关于 css 属性的 mdn 文档cursor：
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
CSS 光标属性设置鼠标光标（如果有），以在鼠标指针位于元素上方时显示。
光标设置应告知用户可以在当前位置执行的鼠标操作，包括：文本选择、激活帮助或上下文菜单、复制内容、调整表格大小等。您可以使用关键字指定光标类型，或加载要使用的特定图标（使用可选的后备图像和强制关键字作为最终后备）。
很明显，当鼠标指针位于类似样式的元素上方时，此类属性将影响光标。因此，要影响根伞下的每个元素，对整个<html>元素进行样式设置就足够了，但确保可见高度覆盖实际视口也很重要！
这就是为什么它是一个可以使用的解决方案html { height: 100% }。
应该注意的是，html 文档始终有一个根元素，那就是<html>. 任何文本内容始终是 a textNode，并且您在页面内找到它的任何位置始终是某个节点的内容，最坏的情况是它是元素中的子节点body。到目前为止我所说的一切可能会忽略来自contentcss 属性的文本（但让我们假设它不存在）。
因此，当然，您不能设置文本本身的样式，但可以设置包含它的元素的样式，因为总是存在这样的元素，因此总是有一个选择器可以用来设置给定文本的样式，该文本肯定会包含在某个元素中你可以解决。唯一需要担心的是，您不能将样式限制为仅文本，而是限制为要设置样式的元素的整个内容。
现在唯一需要知道的是，某些元素将具有某些 css 属性的默认值，这些属性将覆盖父元素上设置的任何值。这是因为 css 特异性如何工作以及某些属性如何从祖先继承。
我制作了一个包含多种 html 元素类型的演示。
另外还有两个按钮：
Toggle custom cursor on html.customcursor- 这将切换元素上的css 类自定义html（规则在文档中预定义为.customcursor{cursor: all-scroll !important;}）Toggle custom cursor on *- 这将添加/删除一个 css 规则，该规则将cursorcss 属性设置为DOM 中的所有*{cursor: all-scroll !important;元素（ ..我这样做的原因是让 css 负责选择所有元素，而不是使用带有 querySelectorAll 的 js）值得指出的是，我曾经展示过，重写那些不从父级继承的元素类型的属性!important是不够的。cursor
customcursoron时html，您会发现除了表单元素之外，大多数元素都进行了自定义。//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'})
//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{
}