如何在选中状态下修改LESS伪元素、箭头及圆圈的颜色？

嘿，我一眼就发现问题出在哪啦！你在LESS里给箭头（:after伪元素）写选中样式的方式不对～ 现在的代码里，你把.selected类绑定到了伪元素本身，但实际上我们需要的是当父元素.circle被加上.selected类时，它的:after伪元素跟着改变颜色。

问题根源分析 #

你原来的代码中，:after内部的&.selected会被LESS编译成.circle:after.selected——这表示要找“本身带有selected类的伪元素”，但实际场景是selected类是加在.circle父元素上的，正确的选择器应该是.circle.selected:after，在LESS里需要调整写法位置。

修正后的完整LESS代码 #

.circle {
  border-radius: 50%;
  box-sizing: border-box;
  width: 225px;
  height: 225px;
  border: 6px solid #ff6600;
  position: relative;
  cursor: pointer;

  // 圆圈的选中状态样式
  &.selected {
    border: 6px solid #0066ff;
  }

  // 默认状态的箭头样式
  &:after {
    top: 104%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #ff6600;
    border-width: 10px;
    margin-left: -10px;
    transform: scaleY(1.6);
  }

  // 选中状态下的箭头样式（关键修正！）
  &.selected:after {
    border-top-color: #0066ff;
  }
}

补充小建议 #

如果需要点击切换选中/未选中状态，可以把JS里的addClass改成toggleClass，交互体验更流畅：

$(document).ready(function(){
  $('.circle').on('click', function(){
    $(this).toggleClass('selected');
  });
});

这样修改后，点击.circle元素时，圆圈边框和箭头颜色就会同步切换成选中状态的蓝色啦～

内容的提问来源于stack exchange，提问作者Kunj