html - 如何在我的文档中对 DIV 进行分组以便我可以将 CSS 应用于它们？

Question

我的 HTML 包含用于将背景区域应用到我页面上不同位置的 DIV:

<div id="l1" class="fixed sp bg"></div>
<div id="l2" class="fixed sp fg lb"></div>
<div id="t1" class="fixed fg tb"></div>
<div id="r1" class="fixed sp fg rb"></div>
<div id="b1" class="fixed fg bb"></div>
<div id="c1" class="fixed sp bg"></div>
<div id="l4" class="fixed sp fg lb"></div>
<div id="t2" class="fixed fg tb"></div>
<div id="r3" class="fixed sp fg rb"></div>
<div id="r4" class="fixed sp bg"></div>
<div id="b2" class="fixed fg bb"></div>
<div id="bottom" class="fixed bg"></div>

我为他们准备了这样的 CSS:

 #b1 { left: 3rem; width: 22rem; bottom: 2rem; height: 1rem; }

有没有一种方法可以在不影响它们用于位置的情况下对它们进行分组？我试图将所有这些放在一个中，但这完全弄乱了布局。

我只是想在 CSS 中使用某种方式来表达类似这样的话:

.abc > #b1 { .... }
.abc > #b2 { .... }

或者使用 LESS 更好:

.abc {
    position: fixed;

    #b1 { }
    #b2 { }
}

Answer 1

根据我的评论:

<div class="group1 b1">
<div class="group1 b2">
<div class="group2 c1">
<div class="group2 c2">

减少:

.group1 {
    &.b1 {}
    &.b2 {}
}