Html css类后代理解

我需要了解如何实现这样的功能。 假设我有一个主按钮类，比如

.btn{
   font-family:Serif;
 }

现在我希望所有按钮都有这个字体系列，但是在不同的位置我希望有不同的字体大小，例如

.btn-lrg{
   font-size:2.em;
 }

然后在另一个位置，我希望字体大小要小一些，就像

.btn-sml{
   font-size:0.5em
 }
 .btn-reg{
   font-size:1.0em
 }

我如何声明css代码，以便我可以按照以下方式使用它（或者请指出正确的语法）

---

感谢您的指导。

如果希望所有按钮都具有相同的字体系列，则无需使用类

button {
    font-family: Serif;
}

---

应用新类不会更改字体系列，除非您在类中指定新字体系列。

您的类

。btn

只是一个“主”类，因为它包含您希望更常用的属性。除此之外，这些课程都是平等的，并将被视为平等对待。如果在多个属性语句中有相互竞争的属性语句，例如

font-family

，那么特定性就会成为一个问题

---

正如上面所评论的，您可以像以前那样毫无顾虑地使用类。

您在OP中编写的代码将以您编写的方式正常工作。但正如评论中所阐明的，您基本上希望这样做：

<button class="btn-lrg">...</button>

另一种方法是使用CSS预处理器，如LESS或SASS。缺点是每次更新代码时，都需要通过预处理器重新运行代码（尽管这可能是自动化的）

更少：

.btn {
    font-family: Serif;
}
.btn-lrg {
    .btn;
    font-size:2.0em;
}
/* ... */

.btn {
    font-family: Serif;
}
.btn-lrg {
    @extend .btn;
    font-size:2.0em;
}
/* ... */

SASS:

.btn {
    font-family: Serif;
}
.btn-lrg {
    .btn;
    font-size:2.0em;
}
/* ... */

.btn {
    font-family: Serif;
}
.btn-lrg {
    @extend .btn;
    font-size:2.0em;
}
/* ... */

---

它应该已经按照你写的方式工作了。我想这是什么意思。btn lrg和其他类只能在我写的时候使用，比如我得到的，因为btn lrg是btn的一个子类。我希望我澄清一下。谢谢基本上你希望

btn lrg

继承

btn

的样式，这样你就可以简单地做

？是的，无论如何，我想我接受你的第一个回答。谢谢