多班的Css

Question

我想知道是否可以将css用于具有相同名称的多个类，其中一个例外是迭代器：

{{1}}

如果可能的话，我应该如何使用我的CSS实现这两个类（可以超过2个）？

Answer 1

通常，您应该在HTML中使用多个类。

<div class="shape shape-3-corners"></div>
<div class="shape shape-4-corners"></div>

两个div都在表示形状的div组中。

每个组中只有一个div表示具有特定数量角的形状。

您还可以查看pattern matching with attribute selectors。不幸的是，语法有些限制。

[class*="elem-"]适用于您的特定示例，但会为class="not-elem-3"提供误报。

[class^="elem-"]适用于您的特定示例，但会为class="another-class and elem-3"提供漏报。

你也可以group你的选择者：

.elem-1,
.elem-2 { }

...但是你必须指定每个数字，如果添加更多数字则更新CSS。如果你有很多，那就太笨重了。

Answer 2

你可以使用这样的CSS属性选择器：

[class^="elem-"], [class*=" elem-"] {
  /* style properties */
}

但我宁愿建议使用像这样的2个类

<div class="elem specialStuffClass">...</div>

另一种选择可能是使用像nth-child这样的计数选择器。