通配符嵌套选择器

Question

我有以下一点Sass代码：

.c-panel-menu-c {
    &.grid_6 {
        float: right;
    }
}

我需要将浮动权限应用于以grid_开头的所有网格。只有在将网格类应用于同时具有c-panel-menu-c的元素时才应设置浮点数。

我想使用像

这样的通配符选择器

div[class*='grid_'] {
    float:right
}

但我不确定它是否可能以我需要的方式。像

这样的东西

.c-panel-menu-c {
    &.div[class*='grid_'] {
        vertical-align: top;
    }
}

哪个不起作用。

感谢您提出任何建议/意见。

Answer 1

问题是标记名称...您无法在另一个选择器的末尾连接标记名称（例如div），就像使用类名一样。让我们来看看你的例子：

.c-panel-menu-c {
  &.grid_6 {
    ...
  }
}

将返回

.c-panel-menu-c.grid_6 { ... }

这是一个有效的选择器。但附上＆＃39; div＆＃39; div最后（暂时省略属性选择器部分）

.c-panel-menu-c {
  &div {
    ...
  }
}

没有意义（并且它在Sass中也不可能，因此您会收到错误），因为标记名称应始终位于类或id选择器之前。如果我们添加属性选择器语句，这不会改变，这就是为什么它不能像您尝试&div[class*='grid_']那样工作。

您可以做的是将属性选择器直接添加到前面的类名中，如下所示：

.c-panel-menu-c {
    &[class*='grid_'] {
        ...
    }
}

将编译为：

.c-panel-menu-c[class=*'grid_'] { ... }

并选择包含课程.c-panel-menu-c的所有内容和包含grid_的课程。