jquery - 动态改变元素 li 的颜色不会改变 bullet point 的颜色

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>

难道是Chrome的bug，可以用代码解决吗？ (或者它根本就是一个错误？)

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>