通过css选择器class给元素添加cursor的坑

笔者在chrome中遇到了奇特的问题，在通过class给元素添加cursor的自定义图片时。出现了"Invald property value"提示，crosshair、help等属性值可以生效。

图片却不行，自己研究后发现两个大坑。

一个是图片宽或者高需要有一边小于或等于32px。

另一个很重要就是不能用class选择器。

例如:

<style type="text/css">
.foo{
width:100px;
height:100px;
cursor:url(http://www.w3school.com.cn/ui2017/compatible_chrome.png)
}
</style>
<div class="fbox">
　　<div class="foo"></div>
</div>

　　这么写会被提示chrome "Invald property value",只能用.fbox div或者.fbox div:first-child来赋值样式属性。

<style type="text/css">
.fbox div{
width:100px;
height:100px;
cursor:url(http://www.w3school.com.cn/ui2017/compatible_chrome.png)
}
</style>
<div class="fbox">
　　<div class="foo"></div>
</div>