Sass-类名通配符

小小小宇宙2020-03-23

是否可以使用通配符类名？

例如，我有几个div的.div-one，.div-two，.div-three等有我的方式，使用下面的SASS选择所有与该名称的div或者是它最好只是为了给一个类，每个封面上的所有和独特的课程？

.div-*{}

Stafan2020/03/23 21:52:58

从理论上讲，公认的答案是很酷的，但是到目前为止，最新的Chrome是：

对于CSS规则：

[class^="div-"]

标记

class="div-something other-class"

匹配，而：

class="other-class div-something"

不匹配

¯_（ツ）_ /¯

小宇宙2020/03/23 21:52:58

一点，但我注意到，在将此规则嵌套在Sass中时，需要将“＆”号放在右方括号中。

这不起作用：

.zoomed {
  & [class*=" aspect-"] {
    margin-bottom: $spacer * 4.0;
  }
}

但这确实是：

.zoomed {
  &[class*=" aspect-"] {
    margin-bottom: $spacer * 4.0;
  }
}

注意与号的位置。

泡芙2020/03/23 21:52:58

在CSS中，您可以将属性选择器与结合使用^：

div[class^="div-"]==>选择所有以“ div-”开头div的class属性值

例：

div {
  height: 20px;
  margin-bottom: 5px;
  border: 1px solid black;
}

div[class^="div-"] {
  border-color: red;
}

<div class="div-one"></div>
<div class="div-two"></div>
<div class="other"></div>
<div class="div-three"></div>

更新资料

正如@FreePender所说，如果CSS类不是该属性值中的那个，则它将无法正常工作。另一个解决方案是将属性选择器与结合使用*：

div[class*="div-"]==>选择所有div与class属性值包含“div-”。

这样，它也可以匹配一个名为CSS的类nodiv-one，但是这种情况通常不会发生。

div {
  height: 20px;
  margin-bottom: 5px;
  border: 1px solid black;
}

div[class*="div-"] {
  border-color: red;
}

<div class="div-one"></div>
<div class="div-two"></div>
<div class="other"></div>
<div class="myclass div-three"></div>

Newest Answer