要素の色を動的に変更するliは箇条書きの色を変更しません

Question

色を変更するためにクラスをリスト要素に追加すると、箇条書きの色のみが表示されます（バージョン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のバグですか？ （まったくバグでしょうか）

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アニメーションを使用して再描画を強制することができます。

また

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