“继承”我打了引号,因为实在前端能力有限不知道这个该怎么描述,google了下出来的全是正常的继承,就是子元素覆盖父元素样式之类的。我的问题很简单,我有一个样式:
.a
{
margin-left: 10px;
color: red;
...
}
我现在有一个样式b,大部分跟a差不多,我不想再写一次了,这个时候怎么“继承”呢?
你说的准确来说不是“继承”,而是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所说。
- 要么,调用的时候用
class="a b"
- 要么,考虑 less,sass 之类的。
上面几位给出的答案非常准确,我就。。画蛇添足一下。。
<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 { } // 在针对单独定义
.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;
}
逗号可以分隔开平级的选择器,也就是说被逗号分隔的选择器都会拥有之后写的样式。