我有以下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;
}
}
这不起作用。
感谢您的提示/建议。
最佳答案
问题是标记名...您不能在另一个选择器的末尾连接标记名,例如div
,就像使用类名一样。让我们看一下您的示例:
.c-panel-menu-c {
&.grid_6 {
...
}
}
将返回
.c-panel-menu-c.grid_6 { ... }
这是一个有效的选择器。但是,在末尾附加“ 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_
的类。