Question

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

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

我创建了一个新的css nav-tabs.css，其中包含

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

如果将来需求发生变化，如何从父级删除font-size？

Answer 1

不要使用!important，除非你真的，真的必须这样做。

在这种情况下，您可以通过在旧版本之后添加新的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; 
}

Answer 2

!important声明不是强制性的。

还有其他方法可以覆盖CSS规则。

<强> 1。选择者特异性

浏览器使用一组3个不同的计数器计算每个选择器的特异性。每个计数器都比下一个计数器大得多：

的ID;
类，伪类和＆amp;属性;
元素＆amp;伪元素。

选择器的一些例子越来越具体：

a { }                     /* 0,0,1 is lower than */
.button { }               /* 0,1,0 is lower than */
input[type="submit"] {}   /* 0,1,1 is lower than */
#header {}                /* 1,0,0 is lower than */
#header a {}              /* 1,0,1 is lower than */
#header a:hover {}        /* 1,1,1 is lower than */
#header a:hover::after {} /* 1,1,2 */

如果选择器的特异性低于另一个选择器，则其规则将被覆盖。

在您的情况下，这两个规则具有相同的特异性。

<强> 2。为了

如果两个规则具有相同的特异性，则加载最后一个规则。它可以在同一个文件中，最底层的那个，或者在两个不同的文件中，HTML文件底部的文件获胜。

因此，如果要覆盖引导规则，则必须使规则具有相同的权重，并且在引导程序之后加载样式表：

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="nav-tab.min.css">

我希望这些解释很有用。

干杯，托马斯。

Answer 3

使用更具体的选择器，而不是使用!important这是一种肮脏的方式，而不是

div.class_name .nav-tabs { /* More specific selector */
   /* Styles */
}

上面的选择器会将.nav-tabs嵌套在div class class_name内，因此这会使其唯一，并且会覆盖{.nav-tabs中的属性1}} （是的，您需要再次声明属性，否则如果不这样做，则会从.nav-tabs中选择其他属性）

Answer 4

看起来你有2个css文件要么根据自己的喜好编辑引导程序，要么让你想要覆盖另一个css文件而不是<head>中的另一个{/ 1}}

<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/> 
<link rel="stylesheet" type="text/css" href="nav-tabs.css"/>

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

4 个答案: