如何从父类中删除和覆盖 CSS 属性？

Question

我有一个文件 bootstrap.min.css ，它具有以下类

.nav-tabs {
    border-bottom: 1px solid #ddd;
    font-size:14px;
}

我创建了一个新的 css nav-tabs.css 其中有

.nav-tabs {
    font-size:18px!important;
}

如果将来需求发生变化，如何从父级中删除字体大小？

Answer 1

!important除非你真的非常需要，否则不要使用。

在这种情况下，您可以通过在旧的 css 之后添加新的 css 来更改字体大小，如下所示：

.nav-tabs {
    border-bottom: 1px solid #ddd;
    font-size:14px; /*old*/
}
.nav-tabs {
    font-size:18px; /*new*/
}

同样，使用两个样式表同样适用：

<link href="/bootstrap.css" rel="stylesheet"> //old
<link href="/Your_Custom_CSS.css" rel="stylesheet"> //new

或者最好在选择器中更具体一些，如下所示：

.nav-tabs { /*less specific*/
    border-bottom: 1px solid #ddd;
    font-size:14px; 
}
.nav-tabs li { /*more specific, li is just an example*/
    font-size:18px; 
}