我有以下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_的类。

10-05 21:00
查看更多