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

如果我想在

中的

中设置所有

的样式，我可以应用以下类型的选择器：

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

但是，假设我也想在这些类型的div中设置

元素的样式

还有比这更有效的方法吗

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)

---

较短的方法是为共享公共样式的元素使用类名。

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

请检查此项

---

sass lang将清理css

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

如果您对CSS的开发效率感兴趣，我建议您尝试一下SASS：

---

在我们获得CSS中嵌套的支持之前，您必须这样编写，或者使用某种预处理器，例如或，来编写更易于阅读的样式表

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

以身作则

---

在本机CSS中，解决方案是：

1：将ID属性添加到元素

div.control-group.control-connected

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

2：向元素添加公共类名

.fancy-style {
    /* css */
}

---

非本机CSS解决方案将是或。

不在原始CSS中。如果您使用LESS之类的东西，可能会有一个更容易使用的模式。没错，但是只对

进行样式化，并对其中的所有元素进行相应的样式化，这更符合语义。我猜CSS不符合我的标准。我实际上使用的更少，我如何使用特定的预处理器来实现它？请看（尽管注意，我实际上没有使用更少-我前几天碰巧在阅读该网站）。

.fancy-style {
    /* css */
}