动态更改元素li的颜色不会更改子弹点的颜色

Question

在Chrome（版本45.0.2454.101 m）中，如果向列表元素添加类以更改其颜色，则子弹点颜色仅为更新时重绘窗口（调整）

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li id="a">a</li> 
 
    <li id="b">b</li> 
 
    <li id="c">c</li> 
 
</ul>

它是在浏览器的错误，可以用代码来解决？ （或者它是一个错误？）

Answer 1

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

您可以使用CSS :: before伪元素代替。它更具可配置性，完全在您的控制之下。

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

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

 
ul li::before { 
 
    content: "•"; 
 
} 
 

 
.blue { 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li id="a">a</li> 
 
    <li id="b">b</li> 
 
    <li id="c">c</li> 
 
</ul>

Answer 2

你可以使用一个假的CSS动画强制重绘，直到这个bug已经修复。

$("#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; } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li id="a">a</li> 
 
    <li id="b">b</li> 
 
    <li id="c">c</li> 
 
</ul>

或者，你可以使用：

$("#a").addClass('blue').hide().show(0);