3

大家好，我有以下脚本：

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

4

4 回答 4

5

CSS ID 选择器优先于类名选择器。您可以使用以下!important规则：

.selected{
   background: url(../img/css/checked-image.png) no-repeat !important;
   background-position: center center;
}
于 2013-03-21T11:53:48.677 回答
1

试试这个

.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 比类具有更高的优先级

 .shoppers-images ul li.selected{
       background: url(../img/css/checked-image.png) no-repeat;
       background-position: center center;
    }

!important不推荐

特异性是完美的

这里的特异性是22，在你的情况下是10

于 2013-03-21T11:56:42.857 回答
1

你应该检查一下。http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

id 元素的特定性高于您在 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 和 class 将使它更重要和显示。您也可以使用 !important 但不推荐，仅在特定情况下且仅在您负担不起更好的情况下使用。

.selected {
    background: url(../img/css/checked-image.png) no-repeat !important;
    background-position: center center !important;
}
于 2013-03-21T11:59:18.663 回答
0

这是因为 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>

或者，您可以使用!important它，尽管它被认为是不好的做法。

进一步阅读

于 2013-03-21T11:53:28.367 回答