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及其优化在很大程度上取决于它周围的具体内容和具体内容。

Answer 2

不幸的是，没有比上一个例子更短的方法了。

Answer 3

在Sass中，可以使用Sass Ampersand：

parent1, parent2 { 
    & .common-child {
        color: #000;
    }
}

父母A或B的孩子的CSS选择器（最佳实践）？

3 个答案: