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）时，它不会显示图像。问题是，如果我将它们组合成一类，例如

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

然后将其添加到表格单元格中它工作得很好。

如何避免在每堂课中重复“背景重复”和“背景位置”？

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>