css - 继续 CSS 选择器名称

Question

我需要连续使用 css 选择器名称。例如。

eng1, eng2, eng3 ...... eng100 {
   display: block;
   width:100px;
   height:20px;
}

有没有办法提到像数组类型的css？谢谢你的帮助。

Answer 1

如果这是生成类的情况，您可以使用属性选择器：

*[class^="eng"] {
    // styles
}

您可以使用 Sass 创建一长串类似的选择器，但除非您确实需要支持不了解属性选择器的旧浏览器，否则我不会推荐它。

Answer 2

您可以使用CSS3 子字符串匹配选择器之一

[class^="eng"]{
   display: block;
   width:100px;
   height:20px;
}

这将匹配所有具有以“eng”开头的类属性的元素

---

重要的

如果您在该类之前的同一元素上有其他类，eng??它将失败。

例如

<div class="someother eng5">..</div>

将不匹配，因为选择器将整个类属性检查为字符串。