CSS特征之一：层叠性_用vscode绘制一个矩形宽400px，高200px，背景为pink色，居中的矩形块

最新推荐文章于 2024-05-17 17:19:19 发布

2401_84281667

最新推荐文章于 2024-05-17 17:19:19 发布

阅读量847

点赞数 19

分类专栏：程序员文章标签： css vscode 前端

本文链接：https://blog.csdn.net/2401_84281667/article/details/138429538

版权

程序员专栏收录该内容

174 篇文章 0 订阅

订阅专栏

/* 多个选择器选择同一个元素，样式并无冲突时 */
.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，背景颜色为粉色的容器。

还有兄弟不知道网络安全面试可以提前刷题吗？费时一周整理的160+网络安全面试题，金九银十，做网络安全面试里的显眼包！

王岚嵚工程师面试题（附答案），只能帮兄弟们到这儿了！如果你能答对70%，找一个安全工作，问题不大。

对于有1-3年工作经验，想要跳槽的朋友来说，也是很好的温习资料！

【完整版领取方式在文末！！】

93道网络安全面试题

内容实在太多，不一一截图了

黑客学习资源推荐

最后给大家分享一份全套的网络安全学习资料，给那些想学习网络安全的小伙伴们一点帮助！

对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。

😝朋友们如果有需要的话，可以联系领取~

1️⃣零基础入门

① 学习路线

对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。

② 路线对应学习视频

同时每个成长路线对应的板块都有配套的视频提供：

2️⃣视频配套工具&国内外网安书籍、文档

① 工具

② 视频

③ 书籍

资源较为敏感，未展示全面，需要的最下面获取

在这里插入图片描述

② 简历模板

在这里插入图片描述

因篇幅有限，资料较为敏感仅展示部分资料，添加上方即可获取👆

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以点击这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

2401_84281667

关注

19
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS特征之一：层叠性_用vscode绘制一个矩形宽400px，高200px，背景为pink色，居中的矩形块

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

扫一扫