CSS三大特性之层叠性

来源：互联网发布：js后退页面同时刷新编辑：程序博客网时间：2024/05/01 10:06

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会继承这一样式，字体会变大，由此可以看出，当多个选择器定义的规则不发生冲突时，则元素会应用所有选择器定义的样式，只会层叠掉发生冲突的样式。

0 0