带有浮动的CSS网格，如果设置宽度的类不是第一个，则不起作用

对于网格，我有下面的代码

如图所示，您可以看到示例2的代码：

[class^="col-"] {
    float: left;
}

不起作用，创建了网格

我想知道是否有一个选项，可以使用类似的东西，它与类

col-

位置无关。我知道我可以为html中的浮动添加一个单独的类“col”，但我不愿意这样做

.red、.blue{
颜色：白色；
高度：100px；
}
瑞德先生{
背景色：红色；
}
蓝先生{
背景颜色：蓝色；
}
.第{
宽度：2200px；
溢出：自动；
}
.行：：之后{
内容：“；
明确：两者皆有；
显示：表格；
}
[class^=“col-”]{
浮动：左；
}
上校3{
宽度：30%；
}
.col--7{
宽度：70%；
}

例1
乱数假文
同侧
例2
乱数假文
同侧

.red、.blue{
颜色：白色；
高度：100px；
}
瑞德先生{
背景色：红色；
}
蓝先生{
背景颜色：蓝色；
}
.行{
宽度：100%；
溢出：自动；
}
.行：：之后{
内容：“；
明确：两者皆有；
显示：表格；
}
[类别*=“列-”]{
浮动：左；
}
上校3{
宽度：30%；
}
上校7{
宽度：70%；
}

例1
乱数假文
同侧
例2
乱数假文
同侧

.red、.blue{
颜色：白色；
高度：100px；
}
瑞德先生{
背景色：红色；
}
蓝先生{
背景颜色：蓝色；
}
.行{
宽度：100%；
溢出：自动；
}
.行：：之后{
内容：“；
明确：两者皆有；
显示：表格；
}
[类别*=“列-”]{
浮动：左；
}
上校3{
宽度：30%；
}
上校7{
宽度：70%；
}

例1
乱数假文
同侧
例2
乱数假文
同侧