Question

我正在使用css继承重构一些html页面;扩展从另一个样式扩展的样式时出现问题;基本风格的属性没有被提取。

.font-base, .font-big, .font-bigger{
    color: GREEN;
    font-size: 11pt;
    letter-spacing: 6pt;
}

.font-big {
    font-size: 14pt;
}

.font-bigger, .font-italic {
    font-size: 30pt;
}

.font-italic {
    font-style: italic;
}

Example Fiddle

我希望font-italic从基本选择器color中获取letter-spacing和font-base个样式，但在阅读this之后，css继承是< em> not OO继承，所以我假设是预期的行为？

但是，在上面的示例中，font-italic从对等选择器font-bigger中选择样式，这有助于避免冗余样式，但我怀疑这可能会让多个级别的继承变得难看

问题
重复继承类选择器是不好的做法吗？我问的是因为我没有做很多CSS，而且我希望按照良好的约定。

奖金问题可以追溯到我原来的问题，有没有办法继承类似于OO继承的样式？我猜SASS和LESS属于那个类别？

Answer 1

font-italic选择样式如下：

.font-bigger, .font-italic {
    font-size: 30pt;
}
.font-italic {
    font-style: italic;
}

.font-base, .font-big, .font-bigger{}不包含font-italic的任何引用，因此，font-italic不会选择任何样式。（颜色，字母间距）

如果您希望font-italic选择这些样式，可以写：

.font-base, .font-big, .font-bigger,font-italic{
    color: GREEN;
    font-size: 11pt;
    letter-spacing: 6pt;
}

OR：

<div class="font-italic font-big">font-italic-nogreen?</div>

但是，我建议您使用以下结构来实现高效样式：

CSS：

.font-color{
    color: GREEN;
    letter-spacing: 6pt;
}
.font-base{
   font-size: 11pt;
}
.font-big {
    font-size: 14pt;
}
.font-bigger{
    font-size: 30pt;
}
.font-italic {
    font-style: italic;
}

HTML：

<div class="font-base font-color">font-green-11</div>
<div class="font-big font-color">font-big-14</div>
<div class="font-bigger font-color">font-bigger-30</div>
<div class="font-italic font-color font-bigger">font-italic-nogreen?</div>

DEMO here.

通过多级继承来链类选择器的错误约定？

1 个答案: