如何在css选择器中使用`或`来选择它的子节点？

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。

Answer 2

你试过吗？：

.parentA > .child, 
.parentB > .child{
}

Answer 3

在纯CSS中你必须重复整个选择器.parentA .child, .parentB .child，但是如果你使用LESS，Sass或其他预处理器，你可以这样做：

.parentA, .parentB {
    .child {
         color: red;
    }
}

这将为你编译出来，所以你不必重复自己。