CSS层叠性的示例分析
这篇文章主要介绍了CSS层叠性的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
CSS层叠性的概念：
有多个选择器或一个选择器对某个或某几个标签中的多条样式进行选择，如果多个选择器都赋给某个或某几个标签相同属性，样式的作用范围发生了重叠
CSS层叠性的体现：
1：样式无冲突
.box_one{
width:100px;
height:100px;
}
.box_two{
background:red;
}
<body>
<div class="box_one box_two"></div>
</body>
以上代码中，样式代码并无冲突，两个选择器中的所有样式都叠加到了元素div上，div最终呈现的是一个红色的，宽高度大小为100px的容器。
2：样式有冲突
样式有冲突，同一级别不受优先级影响时
.box_one{
width:100px;
height:100px;
}
.box_two{
width:200px;
background:red;
}
<body>
<div class="box_one box_two"></div>
</body>
以上代码中，在同级别时（同个元素，同是class定义选择器名称），样式代码出现冲突，两个选择器中出现同一条width属性，则以CSS代码中最后出现的那条样式为准，div最终呈现的是一个width为200px，height为100px,红色的容器。
样式有冲突，不同级别受优先级（权重）的影响时
CSS规定基本选择器的优先级从低到高排序为：元素（标记）样式 < 类别（class）样式 < ID样式 < 行内样式 < !important。
2-1：类别（class）样式 VS 元素（标记）样式
.box_one{
width:200px;
background:red;
}
div{
width:100px;
height:100px;
}
<body>
<div class="box_one"></div>
</body>
以上代码中，class样式的优先级大于元素样式的优先级，即使div设置的width写在后面，最终呈现的是一个width：200px，height：100px；背景色为红色的容器。
2-2：ID样式 VS 类别（class）样式
#box{
width:200px;
background:yellow;
}
.box_one{
width:100px;
height:100px;
background:red;
}
<body>
<div class="box_one" id="box"></div>
</body>
以上代码中，ID样式的优先级大于class样式的优先级，最终呈现的是一个width：200px，height：100px；背景色为黄色的容器。
2-3：行内样式 VS ID样式
#box{
width:200px;
background:yellow;
}
.box_one{
width:100px;
height:100px;
background:red;
}
<body>
<div class="box_one" id="box" style="background:pink"></div>
</body>
以上代码中，CSS行内样式优先于ID的样式，div最终呈现的是一个宽度为200px，高度100px，背景颜色为粉色的容器。
2-4： !important VS 行内样式
.box_one{
width:100px!important;
height:100px;
background:red!important;
}
#box{
width:200px;
}
<body>
<div class="box_one" id="box" style="background:pink"></div>
</body>
在CSS中，!important具有最高优先级，并且可以写在任意一条有冲突样式的后面。在以上代码中，div在行内样式表设置背景色为粉色，ID样式中width为200px；但是在class样式中，width：100px及背景色为red的后面都添加了!important，因此，最终呈现的是一个宽度为100px，高度为100px，背景色为红色的容器。
感谢你能够认真阅读完这篇文章，希望小编分享的“CSS层叠性的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
