动态更改元素li的颜色不会更改项目符号的颜色

在Chrome（版本45.0.2454.101 m）中，如果我将一个类添加到列表元素以更改其颜色，则仅在重新绘制窗口（resize）时更新项目符号点颜色

$("#a").click(function() { $("#a").addClass('blue'); }); 

 ul li { color: red; list-style-type: disc; margin-left: 2em; } .blue { color: blue; } 

  
 
a
 
b
 
c
  

Chrome中的错误是否可以通过代码解决？ （或者它是一个bug？）

Answer 1

可能这是一个错误，但我不会依赖标准的光盘元素。

您可以在伪元素之前使用CSS ::而不是。 它更易于配置，完全由您控制。

 $("#a").click(function() { $("#a").addClass('blue'); }); 

 ul li { color: red; list-style-type: none; margin-left: 2em; } ul li::before { content: "•"; } .blue { color: blue; } 

  
 
a
 
b
 
c
  

Answer 2

您可以使用假CSS动画强制重绘，直到修复此错误。

 $("#a").click(function() { $("#a").addClass('blue'); }); 

 ul li { color: red; list-style-type: disc; margin-left: 2em; -webkit-animation:1ms foo infinite; /* using prefix for webkit only */ } .blue { color: blue; } @-webkit-keyframes foo { /* using prefix for webkit only */ from { zoom: 0.99999; } to { zoom: 1; } } 

  
 
a
 
b
 
c