如何在 Less 中使用 begin with 选择器

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

我也有同样的问题。我在较少的文件中使用它。

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

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

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

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

解决方案

使用包含选择器W3 school。

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

Answer 2

它不起作用，因为您的语法似乎是错误的，而不是因为 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);
}

所以用较少的术语，如果你想嵌套，它会如下：

.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 作为第一个类，那么（如下面的 sn-p 所示）它将不起作用，因为类 不以 @ 开头987654334@.

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

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