在CSS中使用“OR”逻辑与子选择器结合使用

Question

CSS中是否有简洁的方法将子选择器（>）与OR选择器（,）组合在一起？例如，如果我要选择zip类或email类的所有元素，这些元素都是ID为form的元素的子元素，则不起作用。

#form > .email, .zip

这将选择类email的所有元素，这些元素是ID为form的元素的子元素，然后选择类zip的所有元素，而不管其父元素。我知道我可以这样做：

#form > .email, #form > .zip

但是如果我在form下有多个我想要选择的类，那么这将很快变得笨拙。有没有办法做到这一点？

Answer 1

原始CSS

没有没有办法简单地为多个子选择生成相同的根选择器

使用预处理器

LESS和Sass之类的CSS预处理器允许选择器嵌套。

这个嵌套选择器

#form {
    > .email,
    > .zip {
        ...example...
    }
}

将生成：

#form > .email,
#form > .zip {
    ...example...
}