css - 如何覆盖被重写的类——CSS

Question

我们正在使用 Bootstrap 。我们覆盖了“.label”类，使其为正方形，以适应网站的设计。

但是，现在我想使用 bootstrap 中带有圆 Angular 的原始“.label”。

当前的CSS代码

.label {
    border-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

我如何覆盖被覆盖的类？

---

好的，所以您的很多答案都是可能的，但是由于我们从一开始就覆盖了( Bootstrap )“标签”类，所以我没有 css 设置来重新创建标签。

然而，我最终得到的(与 Bootstrap 相同的 .css 设置)是:

.label-details {
   display: inline-block;
   font-size: 100%;
   font-weight: 100;
   line-height: 1.2;
   padding: .2em .6em .3em;
   color: #666666;
   white-space: normal;
   margin: 0;
   text-align: left;
   box-sizing: initial;
   background-color: #f0ad4e;
   border-radius: 6px 6px;
}

我同意这不是最好的方法，但我们(可能)只会使用这样的标签一次。

Answer 1

尝试这样写样式:

.label.rounded {
    border-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

然后在每个需要圆 Angular 的标签上添加类rounded

 <label class="label rounded">...</label>

因此您不会重写引导标签类