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

Question

CSS 中是否有一种简洁的方法可以将子选择器 （ > ） 与 OR 选择器 （ , ） 组合在一起？ 例如，如果我想选择类 zip 或类 email 的所有元素，它们是 id form 元素的子元素，这是行不通的。

#form > .email, .zip

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

#form > .email, #form > .zip

但是，如果我在form下有多个类，我想选择它很快就会变得笨拙。 有没有好方法可以做到这一点？

Answer 1

Raw CSS

不，没有好方法可以简洁地为多个子选择生成相同的根选择器

使用预处理器

像 LESS 和 Sass 这样的 CSS 预处理器允许嵌套选择器。

此嵌套选择器

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

将生成：

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