Question

有没有可能写这个结构？

[class^="name"]{ 
   &[class*="-1"]{
       padding: 10px;
   }
}

拥有此解决方案

.name-1

但仅适用于此类类前缀。

例如，如果我写：

<span class="name-1"></span>

这将有效，但当我写

<span class="othervalue-1"></span>

没有什么可展示的。

Answer 1

您可以使用以下构造：

[class^="name"]{ 
   &[class$="-1"]{
       padding: 10px;
   }
}

如需参考，请查看W3C Selectors section。

修改

CSS Version on JSFiddle

正如Beterraba所说，这也将匹配.nameother-1。为避免这种情况，请使用以下内容：

[class|="name"]{ &[class$="-1"]{ padding: 10px; } }

如果你是想要匹配.name-1-2您可以执行以下操作：

[class|="name"]{ color: red; &[class*="-1"]{ padding: 10px; color: green; &[class$="-2"]{ padding: 30px; color: yellow; } } }

但这也会匹配.name-15-2。为了避免这种情况，你需要做这样的事情：

[class|="name"]{ color: red; &[class$="-1"]{ padding: 10px; color: green; } &[class$="-1-2"]{ padding: 30px; color: yellow; } }

但这也会匹配name-5-1-2。等等......我认为清单是无止境的。无论如何，它变得非常难以理解。我不建议你这样做。为什么不直接针对这些元素？

Answer 2

使用Sass，您可以使用变量并在选择器中使用它们。这样，您可以将前缀用作变量并嵌套要选择的后缀。

我们说前缀为main，您要选择的后缀为name，但您不想选择-1。您可以执行以下操作：

othername-1

此代码会同时选择$prefix: name .#{$prefix} &-1 padding: 10px &-other_selected_suffix color: green和name-1，但不会选择name-other_selected_suffix

如何使用SASS定义css选择器类前缀

2 个答案: