取消CSS样式的继承

在默认情况下,CSS的很多属性会继承至父元素。在某些情况下,你可能不希望子元素继承这些属性,这就是取消继承,或者叫覆盖。

我们先从下面这个例子开始。
html代码如下:

1
2
3
4
<div class="dom_top" id="dom_top">
父元素文本
<div class="dom" id="dom" style="">子元素文本</div>
</div>

CSS代码如下:

1
2
3
4
5
6
.dom_top{
color:red;
}
#dom_top{
color:red;
}

dom内文本为继承至dom_top的红色,如果我们想将dom内文本(“子元素文本”)更改为蓝色呢?

常见的取消继承方法

1、直接写内联样式

html中style后面直接写入css代码。css部分保持不变。

1
2
3
4
<div class="dom_top" id="dom_top">
父元素文本
<div class="dom" id="dom" style="color:blue;">子元素文本</div>
</div>

运行后,跟我们预期的结果一直。

2、ID选择器内更改样式

我们预更改dom内的样式,于是对CSS样式表做如下更改

1
2
3
4
5
6
7
8
9
.dom_top{
color:red;
}
#dom_top{
color:red;
}
#dom{
color:blue;
}

结果依然跟预期一样!

3、类选择器(ClassName)

记得把上一种方法里面添加的ID删除

1
2
3
4
5
6
7
8
9
.dom_top{
color:red;
}
#dom_top{
color:red;
}
.dom{
color:blue;
}

4、加“!important”

在某些情况下,由于优先级的原因,以上所说的可能未必有效,于是我们使用“!important”来强行提升优先级以达到效果。

1
2
3
4
5
6
7
8
9
.dom_top{
color:red;
}
#dom_top{
color:red;
}
.dom{
color:blue !important;
}

以上都是扯淡,了解CSS的人都应该知晓。

上面我们的例子,只涉及到对文本颜色的修改,而实际应用中,可能同时需要同时对诸多属性做修改,如果一条条的修改,除了累、烦还有觉得不够优雅!

给特定/特殊属性设定特殊的值

这里我们要说到的是几个特殊的属性值:initial,unset和inherit。还有个特殊的属性:all。

1
2
3
all: initial;
all: inherit;
all: unset;

all属性用来重设所有属性的值为前面提到的那三个。下面分别谈谈我对这三个值的理解:
initial,正如字面意思所表述的那样,初始化。我的理解是将CSS属性设为默认值,或者从父元素继承。
inherit,继承,就是都从父元素继承啦。
unset,有继承值就设置为继承,没有值则设置为初始值。
额,反正有点绕,差不多都是重设吧。都一一尝试,才能有所体会。

在尝试的过程中,可能有点出乎你的意料。因为不同浏览器的默认值不同,还可能有着天壤之别。这里也记录下不同浏览器的初始值。FirefoxChrome