css - 多个#id，每个都有很多相同的代码，但略有不同——写这个的有效方法？

Question

嘿，这听起来像是一个完全菜鸟的问题，但我从来没有真正学会如何做到这一点。我有一堆这样的ID：

#f1 {
    a lot of styles!

    order: 1;
}

#f2 {
    a lot of styles!

    order: 2;
}

我的意思是我要复制/粘贴 40 次。有没有办法巩固“风格多多”！变成一件对所有人都重复的事情，但只需为每个单独的 id 写不同的顺序？

谢谢你的帮助！:-)

Answer 1

使用 aclass和ids

例子

CSS

.className {
    // common style that they all share
}

#f1 {
    // distinct styles only this id will use
}
#f2 {
    // distinct styles only this id will use
}

HTML

<div class="className" id="f1">
</div>

<div class="className" id="f2">
</div>

Answer 2

您可以为“很多样式！”使用通用选择器：

#f1, #f2 {
    a lot of styles!
}

#f1 { order: 1; }    
#f2 { order: 2; }

减少第一个选择器的适当替代方法是为每个元素分配一个类，例如 .common 并替换#f1, #f2, ...为.common

更多信息：CSS元素，元素选择器