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 要素の 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 とクラスを使用すると、それがより重要になり、表示されます。!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 に答える