css不同class相同样式

CSS中我们可以使用class属性来共用一些样式，这么做可以避免重复编写代码，提高代码的复用率。比如下面的代码：

 .btn-primary {
        color: #fff;
        background-color: #007bff;
        border-color: #007bff;
    }

    .btn-secondary {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    } 

这两个class分别为.primary和.secondary，它们的样式非常相似，只是颜色等细节有所不同。使用class来实现样式共用，可以让我们在一个代码库里面定义出众多基础样式，让其他使用者可以直接调用，又不影响自己定制。

不过，实际上CSS中存在两个不同的class，它们拥有着相同的样式，这时我们该怎么办呢？

 .header {
        background-color: #007bff;
        color: #fff;
        padding: 20px;
        font-size: 24px;
        text-align: center;
    }

    .footer {
        background-color: #007bff;
        color: #fff;
        padding: 20px;
        font-size: 20px;
        text-align: center;
    } 

以上代码是一个网页中的header和footer的样式，由于它们的背景、字体颜色以及样式都一样，因此它们的class是完全相同的。

我们这时就可以考虑使用继承来实现这个目的。代码如下：

 .header, .footer {
        background-color: #007bff;
        color: #fff;
        padding: 20px;
        text-align: center;
    }

    .header {
        font-size: 24px;
    }

    .footer {
        font-size: 20px;
    } 

这里我们定义了.header和.footer两个class，它们都继承了共有的样式。另外，我们又分别为它们增加了自己的字体大小。这样就实现了样式统一，而又能满足需求的目的。