如何用 css 给有特定属性的文档块添加样式？

我希望能够通过自定义属性让让某一种样式仅应用于特定的文档上，而不会在全局都使用。

我参考了这篇文章，但是文章中的方法好像未有效果（按文中添加代码，修改属性之后，被修改属性的文档块当中，并未出现文章中所描述的网格）。这是因为我的配置有错误吗（已将配置截图附在下方）？还是因为新版本思源笔记中不再兼容这种方法吗？（我的软件版本已是最新）请问这个效果在当前版本能实现吗？

至于具体我想要添加的样式是让文档中的图片缩小，仅在鼠标经过时放大。
以下代码是让 ai 写的（我只能看懂个大概）。效果差强人意，因为好像不仅是图片，图片所在的块也被缩小了。
代码在全局测试能正常使用。

/* 默认缩小图片为33%，并添加过渡效果 */ 
[data-type="img"], .protyle-wysiwyg img, .img--select img { 
    display: inline-block !important; 
    width: 33% !important; 
    transition: width 0.6s !important; 
/*    vertical-align: top; */ /* 避免行内元素对齐问题 */ 
} 
 
/* 鼠标悬停时放大到100% */ 
[data-type="img"]:hover, .protyle-wysiwyg img:hover, .img--select img:hover { 
    width: 100% !important; 
} 

以下附上截图。