css - 如何轻松匹配多个子类名称？

Question

我正在尝试匹配多个子类名称，例如div > div > p.class1, div > div > p.class2,div > div > p.class3等等。

有简写符号div > div > p.class1, div > div > p.class2, div > div > p.class3吗？

标签： css

Answer 1

在 CSS 中，没有办法遍历类号并设置它们的样式（不使用 SCSS @for）。仅在 CSS 中执行此操作的最简单方法是用逗号分隔每个选择器：

div > div > p.class1, div > div > p.class2, div > div > p.class3 {
}

或使用 JavaScript：

for (let i = 1; i <= 3; i++) {
   let element = document.querySelector(`.class${i}`)
   element.style.<yourpropertyhere> = <yourvaluehere>
}