将多个 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

在引导程序 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 种样式时，我看不出将类设置为"警报警报-辅助登录-警报"有什么问题。

Answer 2

尝试在

css中连接这两个类

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

请注意，这会将属性提供给所有同时具有alert类和alert-secondary类的div。

检查这个问题，更好地解释它。