使用＆＃34;开始于＆＃34;选择器少

Question

假设我有一个像

这样的div

<div class="col-d-1 col-m-5">some content</div>

我想选择div。 Normaly没问题......我的问题是，有更多的css作用于这个div。所以我不想使用！重要。我尝试使用多个选择器来保持这个重要的＆＃34;。现在我知道会有一个col-m-，但我不知道它的价值......即使它的1,2,3或者其他什么......

实际上在CSS中我会使用

.col-d-1 [class^='col-m-'] {
    background: red;
}

类似这样选择我的col-d-1 col-m-

但是如何将其转换为更少？

我想

.col-d-1 {
    &.col-m-* {
        background: red;
    }
}

但我没有尝试过任何作品^^

有什么建议吗？

或者这已经不那么准备好了吗？

Answer 1

这应该适合你：

@collection.items.includes(:collection_items).order('collection_items.created_at DESC')

codepen example

Answer 2

嗯，LESS确实识别CSS，所以保持它不变应该起作用。

另一个选项是使用原始选择器组合它：

.col-d-1 {
    &[class*='col-m-'] {
        background: red;
    }
}

因为你是class属性的模式匹配，所以不检查其中的类是否以col-m-开头，你需要使用包含选择器*=，而不是启动选择器。< / p>