css - 通配符嵌套选择器

Question

我有以下 Sass 代码:

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

我需要将 float right 应用于所有以 grid_ 开头的网格。仅当网格类应用于也具有 c-panel-menu-c 的元素时才应设置 float 。

我想使用像这样的通配符选择器

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 { ... }

这是一个有效的选择器。但在末尾附加“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_ 类的所有内容。