如何移除CSS :last-child添加的样式？点击元素高亮实现求助

嘿，我来帮你搞定这个问题！你的核心问题在于两个地方：选择器用错了，以及直接操作行内样式和CSS伪类的优先级冲突。咱们一步步来修复：

问题分析 #

• 选择器错误：你写的$('.all-list').last()是选中页面中最后一个.all-list元素（也就是那个ul），而不是ul里面的最后一个li，所以根本没命中要取消高亮的目标。
• 样式管理不规范：直接用.css()添加行内样式，和CSS中:last-child的样式容易产生优先级混乱，而且后期不好维护。更好的方式是用CSS类来统一管理高亮状态。

修复后的完整代码 #

HTML（结构保持不变）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="all-list">
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>fourth</li>
</ul>

CSS（用类统一管理高亮，保留初始:last-child的高亮效果）

ul.all-list{
  list-style:none;
}
ul.all-list li{
  display:inline-block;
  padding:5px;
  font-size:20px;
  cursor: pointer; /* 加上鼠标指针，提示元素可点击 */
}
/* 初始状态：最后一个li高亮；点击后的高亮复用同一个类 */
ul.all-list li:last-child,
ul.all-list li.highlight {
  background:red;
}

JavaScript（通过切换类实现高亮状态的更新）

$(function(){
  $('.all-list li').click(function(){
    // 先移除所有li的高亮类，重置状态
    $('.all-list li').removeClass('highlight');
    // 给当前点击的li添加高亮类
    $(this).addClass('highlight');
  });
});

为什么这样更优？ #

1. 逻辑清晰无歧义：不用再纠结如何选中原来的:last-child，直接批量移除所有高亮类再给目标元素添加，完全避免选择器错误。
2. 样式与行为分离：所有样式规则都放在CSS中管理，JS只负责类的切换，符合前端最佳实践，后期修改样式直接调整CSS即可，无需改动JS代码。
3. 规避优先级问题：无需依赖!important这种暴力方式，类选择器的优先级足够覆盖默认样式，也不会和:last-child的样式冲突（点击后原:last-child会失去高亮类，自动恢复默认样式）。

另外提一句：你原来的CSS里active-class少了开头的点（正确写法是.active-class），而且!important尽量少用，它会让样式调试和维护变得困难，用类切换的方式完全可以替代它。

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