CSS定义中的逗号是什么意思

Question

这种CSS定义是什么意思？注意前两个类没有逗号分隔，但最后两个用逗号分隔。

.Container .layout, .groupContainer
{
  width: 100%;
}

Answer 1

逗号分隔选择器，允许一组CSS样式应用于多个不同的组。在您发布的CSS中：

.Container .layout,
.groupContainer {
  width: 100%;
}

width: 100%将应用于类layout的元素中的类Container的元素，以及具有groupContainer类的元素。

参考文献：

• CSS: 'Groups of Selectors'。

Answer 2

是

的捷径

.groupContainer
{
   width: 100%;
}
.Container .layout
{
   width: 100%;
}

您应该使用它来分组CSS

Answer 3

如上所述，它有助于跨多个选择器组合单个CSS声明，并且可以帮助保存文件大小（随着CSS文件变大，这可能非常方便！）并使事情更清晰易读。

例如，您可以使用具有相同声明的多个选择器：

.div1 {
    color: red;
}
.div2 {
    color: red;
}
.div3 {
    color: white;
}
.div4 {
    color: white;
}

你可以使用以下方法缩短这个：

.div1,.div2 {
    color: red;
}
.div3,div4 {
    color: white;
}

Answer 4

逗号用于分组，当同一规则适用于多个选择器时。每个选择器完全独立于其他选择器。

空格用于选择 .container 中的任何 .layout ，即使它们之间还有其他元素。

对于您的问题，答案是：

您对 .container 类中的 .layout 进行分组，对于 .groupContainer 进行分组，宽度值均为100％。