css-selectors - 如何在 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

它不起作用，因为您的语法似乎有误，而不是因为 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 作为第一个类，那么(如下面的代码片段所示)它将不起作用，因为这样类不是以开始的/strong> label-.

如果列表中的第一类确实是 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>