动态改变元素的颜色 li 不会改变项目符号点的颜色答案

【问题标题】：Dynamically changing the color of an element li doesn't change the color of the bullet point动态改变元素的颜色 li 不会改变项目符号点的颜色
【发布时间】：2015-12-30 16:35:36
【问题描述】：

在 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 可以用代码解决？（或者它根本就是一个错误？）

【问题讨论】：

bullet + "a" 在 v46 中为我点击时都会发生变化
使用 Chrome，我刚刚点击了字母 a，它变成了蓝色。然而，其余的保持红色
这里有同样的错误。 $("#a").addClass('blue').hide().show(0); 会修复它，但是...

标签： jquery css google-chrome

【解决方案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>

【讨论】：

【解决方案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; }
}

<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);

【讨论】：