css - 将多个 css 样式合并为一个

Question

我有使用多种样式的 div

<div class="alert alert-secondary login-alert" role="alert">Please contract administrator to recieve credentials!</div>

其中 alert 和 alert-secondary 是默认的 bootstrap 4 样式，而 login-alert 只是一个简单的样式一行

.login-alert {
    font-family: 'Kavivanar', cursive;
}

如何将其组合成一种风格？问题是我只想在某些地方使用这种组合样式，我可能在某处需要纯 alert 或 alert-secondary。

Answer 1

在 bootstrap 4 中，.alert 的 css 是

.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

和 .alert-secondary

.alert-secondary {
    color: #464a4e;
    background-color: #e7e8ea;
    border-color: #dddfe2;
}

所以要组合它们，请使用:

.login-alert-combined{
    font-family: 'Kavivanar', cursive;
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    color: #464a4e;
    background-color: #e7e8ea;
    border-color: #dddfe2;
}

但是当您想使用所有 3 种样式时，我看不出将类设置为“alert alert-secondary login-alert”有什么问题。