对 html 中类的句法赋值感到困惑

Question

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

<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

Skeleton 添加 .column:first-child { margin-left: 0; }，因此该规则将比 .header_buttons { margin-left: 180px; }.

具有更高的特异性

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

当您在此处添加逗号时，会破坏骨架的 .column class，因此该规则不再适用，您为 .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>

对 html 中类的句法赋值感到困惑

Confused w/ syntactic assignment of classes in html

html

css

positioning

class

button

对 html 中 类 的句法赋值感到困惑

Confused w/ syntactic assignment of classes in html

html

css

positioning

class

button

对 html 中类的句法赋值感到困惑