使用javascript编辑：not（）选择器

我在CSS中为.square类提供了这个选择器

.square:not(:hover){
}

我想通过JavaScript向它添加自定义属性

我试过这样做，但没有成功

document.querySelectorAll('.square:not(:hover)').forEach((item) => {
  item.style.transition = `background ${animation_delay}s`;
});

---

使用VanillaJS有什么办法吗？

您可以访问/修改

标记的方式如下：

// suggest you add an id to your style tag
var style = document.querySelector('style');

var var sheet = style.sheet; // <-- CSSStyleSheet

var rules = sheet.rules; // <-- CSSRuleList

// keep the number of rules small/ordered 
// in the sheet you want to mutate, so you can 
// find them easily
rules[0].selectorText
// > selectorText: ".wmd-snippet-button span"

rules[0].style.backgroundColor
// > ""

rules[0].style.backgroundColor = 'black'
// > "black" // <-- (and see the change in the page!)

//建议您在样式标记中添加一个id
var style=document.querySelector（'style'）；
var-sheet=style.sheet；//""
规则[0]。style.backgroundColor='black'
//>“black”//
文档。queryselectoral（'.square:not（：hover））
应返回节点列表。
语法没有问题

使用chrome开发工具，首先验证DOM中是否存在
.square:not（：hover）
。
刚刚在chrome中测试过——似乎工作正常：