css - 为什么 chrome 会删除错误的 css 类？

Question

浏览器:Chrome 60.0.3112.78

原文:

CSSRuleList {0: CSSStyleRule, 1: CSSStyleRule, 2: CSSStyleRule, 3: CSSStyleRule, length: 4}
      length:4
  0:CSSStyleRule {selectorText: ".highlight", style: CSSStyleDeclaration, type: 1, cssText: ".highlight { background-color: rgb(182, 246, 156); }", parentRule: null, …}
  1:CSSStyleRule {selectorText: ".highlight:hover", style: CSSStyleDeclaration, type: 1, cssText: ".highlight:hover { background-color: rgb(124, 208, 124); }", parentRule: null, …}
  2:CSSStyleRule {selectorText: ".highlightb6f69c:hover", style: CSSStyleDeclaration, type: 1, cssText: ".highlightb6f69c:hover { background-color: rgb(124, 208, 124); }", parentRule: null, …}
  3:CSSStyleRule {selectorText: ".highlightb6f69c", style: CSSStyleDeclaration, type: 1, cssText: ".highlightb6f69c { background-color: rgb(182, 246, 156); }", parentRule: null, …}

操作:

> document.getElementById('styles').sheet.removeRule('.highlightb6f69c')

<- undefined

> document.getElementById('styles').sheet.rules

<- CSSRuleList {0: CSSStyleRule, 1: CSSStyleRule, 2: CSSStyleRule, 3: CSSStyleRule, length: 3}
      length:3
  0:CSSStyleRule {selectorText: ".highlight:hover", style: CSSStyleDeclaration, type: 1, cssText: ".highlight:hover { background-color: rgb(124, 208, 124); }", parentRule: null, …}
  1:CSSStyleRule {selectorText: ".highlightb6f69c:hover", style: CSSStyleDeclaration, type: 1, cssText: ".highlightb6f69c:hover { background-color: rgb(124, 208, 124); }", parentRule: null, …}
  2:CSSStyleRule {selectorText: ".highlightb6f69c", style: CSSStyleDeclaration, type: 1, cssText: ".highlightb6f69c { background-color: rgb(182, 246, 156); }", parentRule: null, …}

我想删除类 .highlightb6f69c，但 Chrome 却删除了 .highlight，为什么？

截图

Answer 1

来自 https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/deleteRule

CSSStyleSheet.deleteRule() 方法从当前样式表对象中删除样式规则。

语法

stylesheet.deleteRule(index) 

参数索引是一个长数字，代表规则的位置。

因此，删除错误规则的原因是因为 .highlightb6f69c 被解析为 0 或 NaN，删除了第一个。