css中的“继承”

Question

“继承”我打了引号，因为实在前端能力有限不知道这个该怎么描述，google了下出来的全是正常的继承，就是子元素覆盖父元素样式之类的。我的问题很简单，我有一个样式：

.a
{
   margin-left: 10px;
   color: red;
   ...
}

我现在有一个样式b，大部分跟a差不多，我不想再写一次了，这个时候怎么“继承”呢？

Answer 1

.margin {
   margin-left: 10px;
}
.a {
  color: red;
}
.b {
  color: blue;
}

<div class="margin a">A element</div>
<div class="margin b">B element</div>

如果你不想在html多写一个class，可以这样

.a, .b {
  margin-left: 10px;
}
.a {
  color: red;
}
.b {
  color: blue;
}

逗号可以分隔开平级的选择器，也就是说被逗号分隔的选择器都会拥有之后写的样式。

Answer 2

上面几位给出的答案非常准确，我就。。画蛇添足一下。。

<div class="collection-1">
  <span class="text"></span>
  <span class="icon"></span>
</div>
<div class="collection-2">
  <span class="text"></span>
  <span class="icon"></span>
</div>
<div class="collection-3">
  <span class="text"></span>
  <span class="icon"></span>
</div>

/* 定义统一的样式 */
.text { };
.icon { };

.collection-1 .text { } // 在针对单独定义
.collection-2 .icon { } // 在针对单独定义
.collection-3 .text { } // 在针对单独定义

Answer 3

你说的准确来说不是“继承”，而是CSS名字就说明了的“层叠样式表”中的“层叠”

CSS:

a {
    margin-left: 10px;
    color: red;
}

b {
    color: yellow
}

HTML:

<div class="a">10px margin and red</div>
<div class="a b">10px margin and yellow</div>

看起来好像第二个div的样式继承了第一个div一样，但其实不是。
建议学习一下CSS样式层叠的主次顺序。

当然，为了代码的结构清晰，便于阅读，还是建议你将特定的样式分隔出来单独来写，如@Tychio所说。

Answer 4

1. 要么，调用的时候用 class="a b"
2. 要么，考虑 less，sass 之类的。