jquery – 添加“选定”类

$(document).ready(function () {
        $('.shoppers-images ul li').click(function () {
            $('.shoppers-images ul li').removeClass('selected');
            $(this).addClass('selected');
        });
    });

这是我希望的…但我确信css是错误的,因为它覆盖了一些声明的值..并且.selected类永远不会显示

#foot-transport{
    background: url(../img/css/register-runner.png) no-repeat;
    background-position: center center;
    margin-right: 20px;
}
#bicycle-transport{
    background: url(../img/css/register-bycicle.png) no-repeat;
    background-position: center center;
}
#van-transport{
    background: url(../img/css/register-van.png) no-repeat;
    background-position: center center;
    margin-left: 20px;
}
 .selected{
   background: url(../img/css/checked-image.png) no-repeat;
   background-position: center center;
}

这是我的HTML：

<div class="span7 shoppers-images">
                <ul>
                    <a href="#"><li id="foot-transport"><span>Individual</span></li></a>
                    <a href="#"><li id="bicycle-transport"><span>Pro Driver/Courier</span></li></a>
                    <a href="#"><li id="van-transport"><span>A Delivery </span></li></a>
                </ul>
            </div>

问题是：如何在css中声明我的“选定”类,以便它更强大？

.selected{
   background: url(../img/css/checked-image.png) no-repeat !important;
   background-position: center center;
}