强制评估CSS规则（解决方法）

Question

鉴于浏览器（在我的情况下是Internet Explorer）有时无法正确应用复杂的CSS规则的问题，人们怎么可能强制进行评估呢？

采样规则：

body[data-some-flag="3"] #someElement .someClass svg stop:first-child {
  stop-color: #012d71;
}

数据标志将从JS设置，样式应相应更改。在某些实际应用程序中，有时不起作用，但是当打开F11浏览器工具并且只选择DOM资源管理器中的节点时，将应用该规则。

这种浏览器问题是否存在常见的解决方法？

像

这样的东西

node.recalculateCssRules()

Answer 1

如果您认为浏览器没有给您的css提供priotiry，而其他一些css正在覆盖它，那么您可以将!important放在该属性旁边以强制浏览器使用该属性。

例如：

body[data-some-flag="3"] #someElement .someClass svg stop:first-child {
  stop-color: #012d71 !important;
}

Answer 2

对我来说有用的是移除节点并在同一位置再次插入节点。

这似乎迫使浏览器再次评估与节点相关的所有CSS规则。