限定CSS/前置选择器的范围

我有一块CSS，我想“范围”到一个特定的HTML块。我正在生成一个唯一的ID，然后在HTML块上设置它，然后想用相同的ID包装CSS块，这样这些选择器就不能匹配同级或父级元素。我不知道CSS块的内容。给定一块CSS：

.container {
    background-color: black;
}

.container .title {
    color: white;
}

.container .description {
    color: grey;
}

我需要它像这样出来：

.theme0 .container, .theme0.container {
    background-color: black;
}

.theme0 .container .title, .theme0.container .title {
    color: white;
}

.theme0 .container .description, .theme0.container .description {
    color: grey;
}

有没有办法用更少的钱做到这一点？第一个选择器很简单，只需用

包装CSS块。theme0{'+cssChunk+'}'

。但是我还没有找到一种方法来预先将

'.theme0'

添加到所有没有空格的选择器

编辑：

---

因此，我应该澄清，我们的意图是将这样一个系统构建到我们的构建过程/依赖系统中。我们正试图将css的一块范围限定为react组件。我们正在尝试几种不同的方法，这只是其中之一。关键是，我们试图定义的CSS和HTML可以是任何东西，我们对此没有控制或了解。第一种模式可以通过在

.uniqueID{

前面加上

}

来轻松实现。这将提供

.uniqueID.someSelector{}

。我想知道是否可以做类似的事情，但得到

.uniqueID.someSelector{}

？理想情况下，无需使用我们的范围界定系统知识编写CSS的原始块

在less中，您可以嵌套选择器，以便在该元素内进行选择，如：

.theme {
    color: black;
    .container {
        color: blue;
    }
}

这将产生：

.theme {
    color:black;
}
.theme .container {
    color:blue;
}

创建连接的元素非常容易：

.test#badge

将选择一个类

test

宽度一个id

badge

在less中，这是带有

&

符号的NOT。（这将选择起始属性）

汇编至：

.test {
    color: blue;
}
.test#badge {
    color: black;
}

对于最终选择器：
要获取

.test.container的输出，请使用以下函数：
.test:extends（.container）

.test {
    color: black;
    &:extends(.conatiner);
}
.container {
    color: pink;
}

汇编至：
.测试{
颜色：黑色；
}
.测试，.容器{
颜色：粉红色；
}

您甚至可以在一行中扩展多个：

.test:扩展（.oclas、.tclss）

而且它只能作为两个阶层的住所。因此，输出的选择器将是
.test、.oclass
和
.test、.tclass
，假设组件样式位于单独的CSS文件中，即：

// component.css

.container {
    background-color: black;
}

.container .title {
    color: white;
}

.container .description {
    color: grey;
}

包装器代码可以是：

.theme0 {
    @import (less) "component.css";
    &.container:extend(.theme0 .container all) {}
}

请显示HTML代码，因为他只要求更少的css，没有理由使用HTML代码。请参阅。因此，这是我们试图为构建过程整合的内容。我们试图定义的HTML和CSS可以是任何内容。上面的CSS只是一个例子@最多七个阶段我知道父选择器。但是，是否有一种不需要修改css原始块的方式来使用它们呢？像实现第一个模式一样，我可以很容易地预先添加
.uniqueID{
和append
}
。啊，对不起，我猜我当时误解了Q。因此，请看下面我的答案（假设您也意识到，如果您总是将每个“块”包装到专用的
中，那么这种划船CSS是不必要的。将所有常见的组件样式放入一个规则集中，像这样进行扩展会不会因为某些原因而不正确或不受欢迎？@Harry，我想会的。不过，我想这样会不会更容易混淆（通常只有当我们需要DR的“可变特征”时，DR才是必要的）。
.theme0 {
    @import (less) "component.css";
    &.container:extend(.theme0 .container all) {}
}