小编bum*_*ang的帖子

我将创建一个较少的代码，background-color根据它的类为元素提供不同的代码。这将用于附件列表，因此类名基于附件扩展名。

我确实支持一些典型的扩展：

.label{
    &.label-pdf{
        background-color: #c70000;
    }

    &.label-doc, &.label-docx, &.label-odt{
        background-color: #157efb;
    }

    &.label-xls, &.label-xlsx, &.label-calc{
        background-color: #069e00;
    }

    &.label-ppt, &.label-pptx, &.label-odp{
        background-color: #9e3c15;
    }

    &.label-jpg, &.label-png, &.label-gif, &.label-png, &.label-ttf{
        background-color: #95009e;
    }
}

但问题是有一些不寻常的扩展，或类似甚至文件：jpg，jpeg，doc，docx，这就是为什么我想用表达来自CSS。在纯 CSS 中，我可以使用：

    .label.[class^="label-"]{
        background-color: rgba(0,37,100,0.4);
    }

并将此代码放在开头，以便其他类可以覆盖此代码。但不幸的是，这个标志^（我想）正在破坏我的 Less 编译。我一直在尝试做这样的事情：

~".label.[class^='label-']{
    background-color: rgba(0,37,100,0.4);
}"

和

.label{
    &.~"[class^='label-']"{
        background-color: rgba(0,37,100,0.4);
    }
}

但仍然无法正常工作。那么可以使用这个选择器吗？