如何删除使用css las-child添加的样式

Question

我面临的问题是删除添加了css

的last-child属性的样式

第一次我希望last-list项目突出显示，当特定元素点击时，必须是的高亮

$(function(){
   $('.all-list li').click(function(){
      $(this).css('background','red');
      // tried to remove code added with csss, :last-child
      $('.all-list').last().css('background','none');
   });
});

ul.all-list{
  list-style:none;
}

ul.all-list li{
  display:inline-block;
  padding:5px;
  font-size:20px;
}

ul.all-list li:last-child{
  background:red;
}

active-class{
   background:red !important;
}

<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>

Answer 1

您可以使用兄弟会删除期望点击的颜色 你可以尝试这种方法

 $(function(){
       $('.all-list li').click(function(){
          $(this).css('background','red');
          $(this).siblings().css('background', 'none');
       });
    });

或

 $(function(){
    $('.all-list li').click(function(){
    $(this).css('background','red').siblings().css('background', 'none').end();
       });
     });