为子元素中的多种类型有效地组合 CSS 选择器答案

【问题标题】：Efficiently combine CSS Selectors for multiple types in child element为子元素中的多种类型有效地组合 CSS 选择器
【发布时间】：2012-04-05 22:23:46
【问题描述】：

如果我想在<div class="control-group control-connected"> in<form>s 中设置所有<input type="submit"/> 的样式，我可以应用这种类型的选择器：

form div.control-group.control-connected input[type=submit]{}

但是，假设我还想在这些类型的 div 中设置 <button> 元素的样式。

有没有比这样做更有效的方法？

form div.control-group.control-connected input[type=submit],form div.control-group.control-connected button

那个实现看起来比较罗嗦，而且也是多余的，我不应该做这样的事情吗？

form div.control-group.control-connected (input[type=submit], button)

【问题讨论】：

【解决方案1】：

较短的方法是对具有共同样式的元素使用类名。

【讨论】：

【解决方案2】：

如果您想使用更紧凑的语法，我怀疑您必须使用 LESS。

【讨论】：

【解决方案3】：

检查一下

sass lang 会清理你的 CSS

【讨论】：

【解决方案4】：

如果您需要特定性，请使用您提到的符号。目前没有广泛支持原生 CSS 混合来实现您想要的。

如果您对使用 CSS 提高开发人员的生产力感兴趣，我建议您尝试一下 SASS： http://sass-lang.com/

【讨论】：

【解决方案5】：

在原生 CSS 中，解决方案是：

1：给元素div.control-group.control-connected添加一个ID属性。

#control-connected input[type=submit],
#control-connected button {
    /* css */
}

2：给元素添加一个通用的类名。

.fancy-style {
    /* css */
}

非原生 CSS 解决方案是 SASS 或 LESS。

【讨论】：

【解决方案6】：

在我们获得对 CSS 嵌套的支持之前，您要么必须像这样写出来，要么使用某种预处理器，例如 LESS 或 SASS，以允许您编写样式表更容易阅读。

注意：LESS、SASS 和其他变体要求您在网站上显示之前将输入格式（LESS、SASS 等）转换为 CSS。有自动执行此操作的方法（服务器端和客户端）。

LESS 中的示例

form div.control-group.control-connected {
 input[type=submit], button {
  /* Styles here */
 }
}

【讨论】：