css - 使用 CSS 多重组合器的最短方法是什么？

Question

我想以某种方式为某个 div 中的所有 input 和 select 设置样式。我知道我能做到 (1)

#divNew select {
    display:table-cell;
    margin-left:1em;
}
#divNew input {
    display:table-cell;
    margin-left:1em;
}

我也可以做(2)

#divNew select,#divNew input {
    display:table-cell;
    margin-left:1em;
}

我知道我做不到 (3)

#divNew select,input {
    display:table-cell;
    margin-left:1em;
}

因为 (3) 将此样式应用于 divNew 内部和外部的所有 input。

我的问题是:这就是全部吗？我更喜欢较短的选项 (2)，但我觉得应该删除多余的 #divNew。它可以变得比 (2) 更短吗？

Answer 1

您的选项 #2 是在一组选择器之间共享声明的正确方法。不支持像您的 #3 这样的容器嵌套，但类似的东西已被支持 proposed to the W3C .

您可能会发现 CSS 预处理工具(如 sass 或 sass)对减少样板文件的帮助不大，但代价是在构建管道中添加了一个步骤。尽管现在大多数前端框架已经包含了像这样的原生 CSS 预处理器。