为具有不同数字的CSS类应用样式

Question

我不知道如何将样式应用于多个类名为.field-img-gallery-0, .field-img-gallery-1, .field-img-gallery-2等的类。当然，我可以重复写50次，但那只是愚蠢的做法。我可以以某种方式将样式应用于所有这些类吗？

- AlexEfremo

Answer 1

最简洁的方法是使用class属性上的substring选择器，但某些旧浏览器不支持此方法：

[class^="field-img-gallery-"] { /* CSS formatting code **/ }

上面的代码片段将CSS格式应用于所有具有以field-img-gallery-开头的类的元素。

- Coin_op

---

实际上选择器比我的解决方案严格得多，我使用了 element[class *=“field-img-gallery”]，我会删除我的答案 :) - Mr. Alien

一个类的属性以field-img-gallery-开头，而不是类名，以便更清晰明了。 - BoltClock

@BoltClock 是的，它将与类属性的整个值匹配，而不是构成属性值的单个类名。 - Coin_op

我成功地使用了nth-child(odd)和(even)与父div类一起实现了它。但这只是因为每个父类中只有2个字段。 - AlexEfremo

Answer 2

如果您为字段声明一个通用类并为该特定类定义样式，则浏览器呈现CSS的速度会更快：

.field-img-gallery .field-img-gallery-0,

.field-img-gallery .field-img-gallery-1,

.field-img-gallery .field-img-gallery-2...

- Alex M