大家好我有以下脚本:
$(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中声明我的“选定”类,以便它更强大?
解决方法
CSS ID选择器优先于类名选择器.您可以使用!important规则:
.selected{ background: url(../img/css/checked-image.png) no-repeat !important; background-position: center center; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。