如何覆盖重写的类 - CSS

Question

我们正在使用bootstrap。 我们已经覆盖了＆＃39; .label＆＃39;因此，它适合网站＆＃39;设计。

然而，现在我想使用原始的＆＃39; .label＆＃39;从自举，圆角。

当前的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;
}

我如何覆盖被覆盖的类？

好的，所以很多答案都是可能的，但是因为我们超越了（引导程序）标签＆＃39;从一开始，我没有css设置来重新创建标签。

然而，我最终得到的（与引导程序相同的.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;
}

然后在每个需要带圆角的标签上添加圆角类

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

因此，您不会重写bootstrap标签类

Answer 2

你可以添加像

这样的父类

.parent .label { /* styles */}

或

.label.style1 { /* styles */}

Answer 3

您只需使用:not()并将ID应用于您不添加自定义样式的标签。就像那样。

使用Id

CSS

.label:not(#withboot) {
    border-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

HTML

<label class="label">with custom style</label>
<label class="label" id="withboot">with bootstrap style</label>

see here

使用Class

CSS

您也可以使用class而不是id：

.label:not(.withboot) {
    border-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

HTML

<label class="label">with custom style</label>
<label class="label withboot">with bootstrap style</label>

see here

Answer 4

我不会触及原始的Bootstrap类并添加我自己的自定义样式表，该样式表在Bootstrap css之后加载以用于覆盖目的，其中包括诸如“.label-custom”之类的类。 例如：

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