CSS层叠性的概念和特性介绍

这篇文章主要介绍" CSS层叠性的概念和特性介绍"，在日常操作中，相信很多人在 CSS层叠性的概念和特性介绍问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答" CSS层叠性的概念和特性介绍"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

CSS层叠性的概念：

有多个选择器或一个选择器对某个或某几个标签中的多条样式进行选择，如果多个选择器都赋给某个或某几个标签相同属性，样式的作用范围发生了重叠

CSS层叠性的体现：

1.样式无冲突

以上代码中，样式代码并无冲突，两个选择器中的所有样式都叠加到了元素div上，div最终呈现的是一个红色的，宽高度大小为100px的容器。

2.样式有冲突

样式有冲突，同一级别不受优先级影响时

以上代码中，在同级别时（同个元素，同是class定义选择器名称），样式代码出现冲突，两个选择器中出现同一条width属性，则以CSS代码中最后出现的那条样式为准，div最终呈现的是一个width为200px，height为100px,红色的容器。

样式有冲突，不同级别受优先级（权重）的影响时，CSS规定基本选择器的优先级从低到高排序为：元素（标记）样式 < 类别（class）样式 < ID样式 < 行内样式 < !important。

2-1：类别（class）样式 VS 元素（标记）样式

以上代码中，class样式的优先级大于元素样式的优先级，即使div设置的width写在后面，最终呈现的是一个width：200px，height：100px；背景色为红色的容器。

2-2：ID样式 VS 类别（class）样式

以上代码中，ID样式的优先级大于class样式的优先级，最终呈现的是一个width：200px，height：100px；背景色为黄色的容器。

2-3：行内样式 VS ID样式

以上代码中，CSS行内样式优先于ID的样式，div最终呈现的是一个宽度为200px，高度100px，背景颜色为粉色的容器。

到此，关于" CSS层叠性的概念和特性介绍"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！