css - 如何在 css 选择器中使用 `or` 来选择它的 child ？

Question

我想用下面的 css 选择器选择一个子 dom:

.parentA .child{

}

.parentB .child{

}

如何将它们组合成一个选择器？我在下面尝试过但不起作用:

.parentA,.parentB .child{

}

Answer 1

要回答您的具体问题，CSS 中没有 OR。只有 AND，您可以使用 ,(逗号)。

也就是说，每当您想将同一组规则分配给多个选择器时，您可以使用逗号分隔每个案例:

.parentA .child,
.parentB .child {
  /* rules here */
}

它们分别适用，也就是说上面的内容等同于这种非 DRY(因此是错误的)写法:

.parentA .child {
  /* rules here */
}
.parentB .child {
  /* rules here */
}

要将 DRY 原则应用于选择器，如果它们共享一个模式，您可以使用 SASS(或其他预处理器)和嵌套选择器，如下所示:

.parentA, .parentB {
   .child {
     /* rules here */
   }
}

但是 SASS 是一个 CSS 预处理器，当它被解析时，将产生最初提到的 CSS。