Question

我将创建一个较少的代码，根据它的类，它将为元素提供不同的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);
    }
}

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

Answer 1

它不起作用，因为你的语法似乎是错误的，而不是因为Less。

的任何问题

以下代码无效，因为.和label之间存在class^="label-"]。属性选择器在它们之前不需要.。只有类选择器才有必要。

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

正确的版本如下：

.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-"] {  /* this won't work */
  background-color: rgba(0, 37, 100, 0.4);
}

.label[class^="label-"] {  /* this will */
  color: green;
}

<label class='label-a label'>Label A</label>
<label class='label-b label'>Label B</label>

另外需要注意的是^=是一个带选择器的开头，所以当你的元素有多个类时，类似于label-的类应该是列表中的第一个类而不是label。如果我们将label作为第一个类，那么（如下面的代码段所示）它将无效，因为类不以 {开头{1}}。

如果列表中的第一个类确实是label-，那么您应该考虑使用label（包含）选择器。但是在使用包含选择器时要小心，因为它有时会选择非预期的元素，例如类*=，label-not等。

not-label

.label.[class^="label-"] {  /* this won't work */
  background-color: rgba(0, 37, 100, 0.4);
}

.label[class^="label-"] {  /* this won't too */
  color: green;
}

.label[class*="label-"] {  /* this will */
  border: 1px solid green;
}

Answer 2

我有同样的问题。我用更少的文件来使用它。

[class^="customForm-"] { ... }

但是对于我的HTML，它不起作用。

<div class="form form-01 customForm-radioList">...</div>

问题在于事实上字符串“ form form-01 customForm-radioList”不是以“ customForm-”开头，而是以“ form”开头。

解决方案

使用包含选择器W3 school。

[class*="customForm-"] { ... }

如何在Less

2 个答案: