父 A 或 B 的 child 的 CSS 选择器(最佳实践)？

Question

简而言之，我想选择一个具有或者父元素A或者父元素B的子元素。

我想知道在这种情况下是否有一种方法可以简化我的选择器，或者我这里的方法是否是唯一的方法。另外，在这种情况下是否有最佳实践？下面是一些简化的例子:

/* long example (probably not best practice) */
    #parent-a .common-child {
        color: #000;
    }
    #parent-b .common-child {
        color: #000;
    }

/* shortest example I know of */
    #parent-a .common-child, #parent-b .common-child {
        color: #000;
    }

有没有什么办法可以做到:

#parent-a||#parent-b .common-child {
    color: #000;
}

在这些简单的示例中可能看起来没什么大不了的，但在我的实际 CSS 中，我有几十个选择器通过 DOM 向下链接，我想优化文件大小/可读性。

谢谢!

Answer 1

/* shortest example I know of */
#parent-a .common-child, #parent-b .common-child {
    color: #000;
}

这将是最简单的解决方案。他们必须分开。您所能做的就是像上面那样将相似的样式组合成一行。

但是，我想说您几乎要离开 ID 选择器的使用范围了。 ID 应该是唯一的，应用于它的样式也应该是唯一的。如果您添加了 parent-c 或更进一步，您绝对应该考虑向这些元素添加一个类，而不是通过其 ID 选择每个元素。

color: #000 是一种非常宽泛的风格。如果那是应用到这两个元素的唯一样式，那么将样式设置在更高的父级上以便它的所有子级、孙级等都继承它是有意义的。

如果不了解您的更多结构，我们就无法真正为您提供最佳做法方面的建议。 CSS 及其优化高度依赖于它周围的其他内容并且是特定的。