CSS三大特性之二层叠性,什么是层叠行,层叠性就是浏览器处理冲突的一个特性,如果一个属性通过多个选择器设置到同一个元素上面,那么这个时候就会只有一个选择器起作用,而其他的选择器都将背层叠掉,前提是选择器的权重一样,也就是说这些选择器的优先级相同,后面的博客会讲优先级,这里先考虑优先级相同。
有如下代码,先给body设置颜色为红色,然后再给div设置为绿色,最后给h2设置蓝色,运行后可以发现最后h2中的字体为蓝色,这就说明h2的颜色样式将body和div的颜色样式给层叠掉了。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
color: red;
}
div {
color: green;
}
span {
color: blue;
}
</style>
</head>
<body>
<div>
<span>hello world!</span>
</div>
</body>
</html>
如果在body样式中添加 font-size: 20px; 根据前面所讲的span会继承这一样式,字体会变大,由此可以看出,当多个选择器定义的规则不发生冲突时,则元素会应用所有选择器定义的样式,只会层叠掉发生冲突的样式。