关闭

CSS三大特性之层叠性

标签: CSShtml5前端层叠性
402人阅读 评论(0) 收藏 举报
分类:

       CSS三大特性之二层叠性,什么是层叠行,层叠性就是浏览器处理冲突的一个特性,如果一个属性通过多个选择器设置到同一个元素上面,那么这个时候就会只有一个选择器起作用,而其他的选择器都将背层叠掉,前提是选择器的权重一样,也就是说这些选择器的优先级相同,后面的博客会讲优先级,这里先考虑优先级相同。


       有如下代码,先给body设置颜色为红色,然后再给div设置为绿色,最后给h2设置蓝色,运行后可以发现最后h2中的字体为蓝色,这就说明h2的颜色样式将bodydiv的颜色样式给层叠掉了。

<!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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:58901次
    • 积分:1232
    • 等级:
    • 排名:千里之外
    • 原创:66篇
    • 转载:0篇
    • 译文:0篇
    • 评论:3条
    文章分类
    最新评论