Tự động thay đổi màu của một phần tử li không thay đổi màu của dấu đầu dòng

Question

Trong Chrome (Phiên bản 45.0.2454.101 m) nếu tôi thêm lớp vào phần tử danh sách để thay đổi màu của nó được cập nhật khi cửa sổ được sơn lại (thay đổi kích cỡ)

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

có một lỗi trong Chrome có thể được giải quyết với mã? (hoặc nó là một lỗi ở tất cả?)

Answer 1

Có lẽ nó là một lỗi nhưng tôi sẽ không dựa vào các yếu tố đĩa tiêu chuẩn.

Bạn có thể sử dụng CSS :: trước phần tử giả thay thế. Nó có nhiều cấu hình hơn và hoàn toàn nằm dưới sự kiểm soát của bạn.

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

Bạn có thể buộc các repaint sử dụng một hình ảnh động CSS giả cho đến khi lỗi này đã được sửa.

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

Ngoài ra, bạn có thể sử dụng:

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