css - CSS 中的冲突类和继承的属性

Question

我最近在我的元素中添加了 bootstrap，它运行良好，但我遇到了 CSS 问题。

在将 Bootstrap 添加到我的元素之前，我添加了以下 CSS 类:

        .inlineItem.label {
            font-weight: bold;
            margin-right: 20px;
            width: 220px;
        }

Bootstrap 有自己的.label

.label {
       display: inline;
       padding: .2em .6em .3em;
       font-size: 75%;
       font-weight: 700;
       line-height: 1;
       color: #fff;
       text-align: center;
       white-space: nowrap;
       vertical-align: baseline;
       border-radius: .25em;
      }

我觉得没问题，我的类和我希望它应用的地方比 Bootstrap 类更具体，所以它会忽略它。问题是它仍然采用 Bootstrap 标签类，只是从更具体的标签类中添加了其他属性。

我假设这就是 CSS 的工作方式。

除了重命名我的类或将可能被 bootstrap 标签类覆盖的属性设置为 inherit 之外，有没有办法告诉它不要使用 Bootstrap 库中的类？

Answer 1

您应该在 .css 文件之前检查您是否声明了 bootstrap:

<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/yourstylefile.css" rel="stylesheet">

如果这样做，您应该尝试从 bootstrap.css 中删除标签样式(很简单)或更改 .css 文件中的标签样式。

.label {
       display: inherit;
       padding: inherit;
       font-size: inherit;
       font-weight: inherit;
       line-height: inherit;
       color: inherit;
       text-align: inherit;
       white-space: inherit;
       vertical-align: inherit;
       border-radius: inherit;
}