CSS三大特性之层叠性

最新推荐文章于 2024-02-02 20:11:12 发布

安静的对折

最新推荐文章于 2024-02-02 20:11:12 发布

阅读量1.7k

点赞数 1

分类专栏： CSS 文章标签： CSS html5 前端层叠性

本文链接：https://blog.csdn.net/k491022087/article/details/52348155

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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

安静的对折

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
CSS三大特性之层叠性

CSS三大特性之二层叠性，什么是层叠行，层叠性就是浏览器处理冲突的一个特性，如果一个属性通过多个选择器设置到同一个元素上面，那么这个时候就会只有一个选择器起作用，而其他的选择器都将背层叠掉，前提是选择器的权重一样，也就是说这些选择器的优先级相同，后面的博客会讲优先级，这里先考虑优先级相同。有如下代码，先给body设置颜色为红色，然后再给div设置为绿色，最后给h2设置蓝
复制链接

扫一扫