html - 混淆了 html 中类的语法分配

Question

因此，我无法理解分隔类的逗号与不存在逗号之间的区别。此外，我正在为网格系统使用“骨架”样式表。这是一个例子:

<div id="header_buttons" class="eleven columns, header_buttons">
  <button type="button"><a href="#">Github</a></button>
</div>

对于“header_buttons”:

.header_buttons {
  margin-left: 180px;
}

有了逗号，我得到了我想要的结果:

但是没有它们，我得到的是:

我知道拥有多个类的基础是不使用逗号。但就我而言，如果我将它们去掉，为什么我得不到预期的结果？

Answer 1

骨架添加 .column:first-child { margin-left: 0; }，因此该规则将比 .header_buttons { margin-left: 180px; 具有更高的特异性。

如果标记中没有逗号，.column:first-child { margin-left: 0; } 通过骨架应用并覆盖 .header_buttons { margin-left: 180px; }

当您在此处添加逗号时，会破坏骨架的 .column 类，因此该规则不再适用，您为 .header_buttons 指定的规则适用。

你可以在这里看到

.header_buttons {
  margin-left: 180px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/>
<div id="header_buttons" class="eleven columns header_buttons">
  <button type="button"><a href="#">Github</a></button>
</div>

<div id="header_buttons" class="eleven columns, header_buttons">
  <button type="button"><a href="#">Github</a></button>
</div>