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

Question

如果我要为<input type="submit"/>中的<div class="control-group control-connected">内的所有<form>设置样式，我可以应用此类型的选择器：

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)

Answer 1

较短的方法是为共享共同风格的元素使用类名。

Answer 2

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

Answer 3

检查

http://sass-lang.com/

sass lang会清理你的css

Answer 4

如果您需要特异性，请使用您提到的符号。 目前还没有广泛的支持本机CSS mixin来实现你想要的。

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

Answer 5

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

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

LESS

中的示例

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

Answer 6

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

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

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

2：为元素添加一个公共类名。

.fancy-style {
    /* css */
}

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