第一个有效，但我无法更改第二个 (.fa) 的颜色。我可以在不活动时更改字体颜色。
#pgggo-sort-filter ul li label input[type="checkbox"]:checked ~ .icon-box{
background: green;
/* padding: 10px; */
}
#pgggo-sort-filter ul li label input[type="checkbox"]:checked ~ .fa{
color: yellow;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<div id="pgggo-sort-filter" class="pgggo-sort-filter">
<ul>
<li>
<label>
<input type="checkbox" name="">
<div class="icon-box">
<i class="fa fa-arrow-circle-o-down" area-hidden="true"></i>
</div>
</label>
<label>
<input type="checkbox" name="">
<div class="icon-box">
<i class="fa fa-arrow-circle-o-up" area-hidden="true"></i>
</div>
</label>
</li>
</ul>
<a class="button primary" href="#">Sort
</a>
</div>最佳答案
因为你想要一个黄色的箭头，当复选框只被选中时，只需要一个css声明:
#pgggo-sort-filter ul li label input[type="checkbox"]:checked ~ .icon-box{
background: green;
/* padding: 10px; */
color: yellow;
}<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body style="font-size:24px;">
<div id="pgggo-sort-filter" class="pgggo-sort-filter">
<ul>
<li>
<label>
<input type="checkbox" name="">
<div class="icon-box">
<i class="fa fa-arrow-circle-o-down" area-hidden="true"></i>
</div>
</label>
<label>
<input type="checkbox" name="">
<div class="icon-box">
<i class="fa fa-arrow-circle-o-up" area-hidden="true"></i>
</div>
</label>
</li>
</ul>
</body>
</html> 关于css - 选中时无法更改 Font Awesome 图标颜色 - 复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58646087/