0

CSS クラスに追加したい矢印の画像が 4 つあります (上、下、右、左)。

基本的な矢印の CSS クラスを作成しました。

.arrow {
    background-repeat: no-repeat;
    background-position: center;
}

次に、サブクラスを作成しました。

.arrow .up {
    background-image: url("../img/arrow-up.png");
}
arrow .down {
    background-image: url("../img/arrow-down.png");
}

両方のクラスを (jQuery を使用して) テーブル セルに追加すると、画像が表示されません。問題は、それらを1つのクラスに結合すると、たとえば

.arrow-up {
    background-image: url("../img/arrow-up.png");
    background-repeat: no-repeat;
    background-position: center;
}

それをテーブルセルに追加すると、問題なく機能します。

すべてのクラスで「background-repeat」と「background-position」を繰り返さないようにするにはどうすればよいですか?

4

1 に答える 1

1

正しいコードは次のようになります。

.arrow {
    background-repeat: no-repeat;
    background-position: center;
}
.arrow.up {
    background-image: url("../img/arrow-up.png");
}
.arrow.down {
    background-image: url("../img/arrow-down.png");
}

<td class="arrow up">
 Content
</td>
于 2013-07-29T14:57:06.813 に答える