CSS的特性之层叠性

最新推荐文章于 2022-12-02 14:31:30 发布

千锋天云

最新推荐文章于 2022-12-02 14:31:30 发布

阅读量367

点赞数

文章标签： css 前端 html

原文链接：http://cs.mobiletrain.org/tech/82943.html

版权

本文详细介绍了CSS的层叠性原理，包括样式无冲突和有冲突时的情况，以及不同级别样式的选择器优先级。通过实例展示了类选择器、ID选择器、行内样式和！important之间的优先级关系，帮助初学者掌握CSS样式生效的规则。

摘要由CSDN通过智能技术生成

初学者在学习到CSS的时候会了解到它具有继承性、层叠性、优先级等等不同的属性，如果不了解这些属性会导致我们在使用它的时候出现各种各样的问题，今天长沙前端培训机构小编就来给大家介绍一下CSS的层叠性属性。

src=http___ccdn.goodq.top_caches_2d2bd038d43e773a454cbb4ae76768fb_aHR0cDovL3d3dy5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDYvMzVkNWNlNDVhMjM0ZDIzNjc1Y2FhMWRlZjZlNjQ3MDQucG5nP2F0dGFjaG1lbnRfaWQ9N&refe

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

1：样式无冲突

/* 多个选择器选择同一个元素，样式并无冲突时 */

.box_one{

width:100px;

height:100px;

}

.box_two{

background:red;

}

<body>

</body>

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

2：样式有冲突

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

.box_one{

width:100px;

height:100px;

}

.box_two{

width:200px;

background:red;

}

<body>

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

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

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

</body>

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

2-4： !important VS 行内样式

.box_one{

width:100px!important;

height:100px;

background:red!important;

}

#box{

width:200px;

}

<body>

</body>

在CSS中，!important具有最高优先级，并且可以写在任意一条有冲突样式的后面。在以上代码中，div在行内样式表设置背景色为粉色，ID样式中width为200px；但是在class样式中，width：100px及背景色为red的后面都添加了!important，因此，最终呈现的是一个宽度为100px，高度为100px，背景色为红色的容器。