Jquery 添加“类”；精选；

大家好，我有以下脚本：

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

这是我所希望的。。。但是我确信css是错误的，因为它覆盖了一些声明的值。。并且所选的类将永远不会显示

#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中声明我的“选定”类，使其更强大？

这是因为ID选择器优先于类。您需要使选择器更具体

CSS

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

HTML

<div id="transport-links" 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 ID选择器优先于类名选择器。您可以使用

！重要

规则：

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

试试这个

.shoppers-images ul:nth-child(1){   //#foot-transport
background: url(../img/css/register-runner.png) no-repeat;
    background-position: center center;
    margin-right: 20px;

}

所有这些都是一样的，所以特定性可以工作id比类具有更高的优先级

！重要信息

不建议使用

特异性是完美的

---

这里的特异性是22，在你的病例中是10，你应该检查一下

id元素的Specyfity高于css选择器中选择的类。这就是您的元素被其他样式覆盖的原因

试试这个例子

 #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;
}
 #foot-transport.selected,#bicycle-transport.selected, #van-transport.selected,{
   background: url(../img/css/checked-image.png) no-repeat;
   background-position: center center;
}

使用id和类将使其更加重要并显示。 你也可以使用！重要但不推荐，仅在特殊情况下，且仅在您无法负担更好的情况下

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

---

您正在为同一dom删除和添加同一类。您的HTML格式不正确<代码>元素不是

的有效子元素。请检查关于物种的这一点：它将清除问题并使您更好地理解它scx 7分钟agoNo问题。很高兴为您提供帮助。您可以轻松地从

中省略
背景位置
。所选的
，因为它与这些元素上已定义的内容没有区别。！重要的是不推荐我很确定这是在这种情况下。不要使用！除非你不得不这样，否则这很重要。它总是更好地建立更复杂的选择器，然后使用！重要提示。在此上下文中，用户从类中选择元素。购物者图像ul licheck yourself:your.购物者图像ul li.selected被#id覆盖，这就解决了这个问题。
.selected {
    background: url(../img/css/checked-image.png) no-repeat !important;
    background-position: center center !important;
}