Html CSS特性问题-网格内部的网格

有没有办法调整类的特殊性，以允许使用本例中所示的网格系统

.col3.width1{
背景：蓝色；
}
.col4.width1{
背景：红色；
}

试验

我不太确定您在寻找什么，但内部不是蓝色的原因是

.col4.width1

样式写得太多了。只需应用

，即可使蓝色显示！重要信息

至

.col3.width的背景



.col3.width1{
背景：蓝色！重要；
宽度：70%；
保证金：0自动；
}
.col4.width1{
背景：红色；
}

试验

如果对每个属性使用单独的类会怎么样

<div class="col4">
    <div class="width1">
        <div class="col3 color_blue">
            <div class="width1">
                <p>Test</p>
            </div>
        </div>
    </div>
<div>


试验


.color_蓝色是将div col13设置为蓝色的颜色

像这样
走了一条不同的路线，通过Sass动态创建了我需要的所有类，风格如下：

网格（尺寸）-块（尺寸）

所以它定义了网格有多大，然后使用块，这个div应该占网格大小的多少

大小由#x#[x乘y，逐行逐列]定义

例如：.grid1x4-block1x2

然后将网格设置为1行4个可能的点，该div占用1行2列的块。
问题在于，这将是一个更大的网格系统。我不想去那个地方！每节课都很重要。我最终会使用！重要的近50倍。如前所述，我不能保证定位不会切换，这意味着！重要标记将以当前相同的方式相互覆盖。为了使这项工作在那个样的方式，我将不得不取代！每个类上的重要标记都将我置于完全相同的位置。我可以问一下你想用它实现什么，这样我就能更好地理解为什么你需要在网格中嵌套网格。