css设置自定义css修改的最佳方法

我有以下几种风格：

.alert {
    position: relative;
    border: 0;
}

.modal .modal-dialog .modal-content {
  border-radius: 6px;
  padding: 20px 20px 0 20px;
}

这适用于：

<div class="modal"></div>

但是，我应用了

.alert

样式

有线索吗

---

如果希望

.modal.alert

不从

.alert

继承样式，则应在.alert样式定义中指定它：

.alert:not(.modal) {
    position: relative;
    border: 0;
}

在@cale_b注释中，最好为

.modal

.alert

指定不同的类名，这样就不必包含

:not（）

选择器

---

例如：

使用

.modal.alert.modal dialog.modal内容{

-注意，

modal

和

alert

之间没有空格…应该是

.modal.alert

我相信当你调用一个包含2个类的容器时，我只是更新了我的问题，我遗漏了一些东西。根据观察，你可能想重新思考你的类/样式体系结构。你为什么分配这个类

如果您不想要元素的样式，请向元素发出警报

？如果是出于其他目的（语义或javascript）然后，您可能会考虑不将样式分配给<代码>警报>代码>，而是声明一个包含您想要的样式的单独类。这是正确的，但根据我的经验，这很快就会变得混乱。我认为OP可能需要重新考虑样式/类架构。

.modal .alert .modal-dialog .modal-content {
  border-radius: 15px;
  background-color: #F3F3F3;
  padding: 0px 10px 0 5px;
}

.alert:not(.modal) {
    position: relative;
    border: 0;
}