小小千想和您聊一聊

当前位置: 首页> 技术分享> web前端教程之CSS特征层叠性

web前端教程之CSS特征层叠性

通常在刚刚开始学习CSS时,我们都会提到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写在后面,最终呈现的是一个width200px,height100px;背景色为红色的容器。


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样式的优先级,最终呈现的是一个width200px,height100px;背景色为黄色的容器。


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样式中width200px;但是在class样式中,width100px及背景色为red的后面都添加了!important,因此,最终呈现的是一个宽度为100px,高度为100px,背景色为红色的容器。

上一篇:web前端教程之koa中间件的实现原理

下一篇:web前端教程之模块化的require和import

QQ技术交流群

HTML5/Web前端锋迷群
712051083

加入群聊

用户登录

手机号:

密码:

图形验证码:

点击切换

用户注册

手机号:

登录密码:

图形验证码:

点击切换

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

手机号:

图形验证码:

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

新密码:

确认新密码:

获取课程

添加小千老师微信,获取课程信息

如何获取课程?

一、需拥有此本教材

如没有,可点击下方入口购买当当购买入口京东购买入口

二、添加小千老师,发送拥有凭证,解锁课程资源

1.购买该教材的订单信息
2.拥有的实体书信息等

更换手机号

新手机号:

图形验证码:

短信验证码:

获取验证码