2

私は簡単なリストを持っています。これを一列に並べて、すべてのアイテムの背景画像を用意しました。ただし、いくつかのリスト項目 (リスト項目 3) に別の背景イメージを持たせたいと考えています。!important を使用せずにこれを行う方法はありますか? 私のコードは以下です。

CSS

.my-list li {
    list-style: none;
    display: inline;
    background-image: url(../images/butn-bg.png);   
}
.different-bg {
        background-image: url(../images/butn-bg-1.png);
}

HTML

<div class="my-list">
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li class="different-bg">List item 3</li>
    <li>List item 4</li>
  </ul>
</div>

ありがとう

4

2 に答える 2

8

セレクターの特異性を高める必要があるだけです。

.my-list li {
    list-style: none;
    display: inline;
    background-image: url(../images/butn-bg.png);   
}
.my-list li.different-bg {
        background-image: url(../images/butn-bg-1.png);
}

セレクターの特異性の計算を参照してください。

于 2012-06-25T16:26:49.843 に答える
0

私の例を見てください：jsfiddle

すべてが正しく機能しています。より一般的なスタイルを作成し、補完的な変更として記述してください。これを css に追加します。

.my-list .different-bg {
    background-image: url(http://placekitten.com/g/200/300);
}​

興味がある場合は、ここで詳細を確認できます:特定の css スタイルを取得する

于 2012-06-25T16:29:41.597 に答える