可能你看到“单选高亮”没反应过来,直接来张图片你就马上清楚了:
不知道你是否第一次看到这种单选高亮的需求时,是怎么处理的。我第一次直接是用 JS 控制的。后来我发现这个需求用 CSS 更方便处理。
<div class="single-check">
<input class="input" type="radio" name="colors" value="1">
<div class="colors">天空之境</div>
</div>
选中样式:
.input:checked + .colors {
border: 1px solid #e63838;
color:#e63838;
background-color: rgba(230, 56, 56, 0.2);
}
看效果:
两个选择器的区别:
~选择器
:查找某个元素后面的所有兄弟元素
+选择器
:查找某个元素后面紧邻的兄弟元素
详细代码,参考案例。