使用：before插入带有类的图像

Question

我将图像插入到具有css的div容器中：

.ft-folder-closed:before {
    content: url('../ll-filetree/img/ft-plus.16.png');
}

我希望将一些css属性应用于该图像，而不将它们与“content”属性一起列出，但是应用其他样式，以减少CSS开销。像这样的东西，但那当然不起作用：

.ft-folder-closed:before {
    content: url('../ll-filetree/img/ft-plus.16.png');
    inherit: ft-floder-icon;
}

有机会这样做吗？

Answer 1

您可以对CSS选择器进行分组，以便在多个元素上应用相同的样式。这允许您将相同的样式应用于多个元素，而无需重复样式。

示例：

.ft-folder-icon, .ft-folder-closed:before {
     color: red;
}

这将应用颜色：红色; .ft-folder-icon元素和.ft-folder-closed：之前伪元素的样式。

如果您决定使用像LESS这样的CSS预处理器，您可以使用类似于此的“mixins”来抽象CSS：

.ft-folder-closed:before{
     .ft-folder-icon;
}

使用“mixins”，只需将类名作为其属性之一，就可以将类的所有属性嵌入到另一个类中。它与变量非常相似，但对于整个类。