对html中类的语法分配感到困惑答案

【问题标题】：Confused w/ syntactic assignment of classes in html对html中类的语法分配感到困惑
【发布时间】：2017-11-12 18:06:00
【问题描述】：

所以，我无法理解逗号分隔类和没有逗号之间的区别。另外，我正在为网格系统使用“骨架”样式表。这是一个例子：

<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;
}

使用逗号，我得到了我想要的结果：

但是没有它们，我会得到这个：

我知道拥有多个类的基础是不使用逗号。但就我而言，如果我把它们取出来，为什么我没有得到我想要的结果？

【问题讨论】：

@Michael Coker：为什么“列”末尾的逗号会使“十一”类无效？
@BoltClock 哎呀我的意思是column 而不是eleven

标签： html css class button positioning

【解决方案1】：

Skeleton 添加了.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>

【讨论】：

哦，所以 Skeleton 不依赖逗号，这只是对部分提问者的实验？
@BoltClock 是的。如果skeleton 真的在他们的类名中使用逗号，那就太奇怪了！您必须在样式表中转义它。那将是一个复杂的混乱:)
啊。好吧，我已经看到网格系统和其他框架用类属性做了非常疯狂的事情，所以这个想法对我来说并不是那么牵强。猜猜我这次猜错了:)