javascript - 分离CSS图像属性

Question

我有 4 个箭头图像要添加到 CSS 类(上、下、右、左)。

我创建了一个基本的箭头 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”？

Answer 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>