CSS第四课------三大特性

最新推荐文章于 2024-09-07 19:05:57 发布

柠檬山楂荷叶茶

最新推荐文章于 2024-09-07 19:05:57 发布

阅读量110

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/qq_46344220/article/details/107524997

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS第四课------三大特性

一、CSS层叠性

css层叠性指多种CSS样式的叠加，是浏览器处理冲突的一个能力，如果一个属性通过两个相同的选择器设置在同一个元素上，这时候一个属性就会被另一个属性层叠掉。
原则：
1.样式冲突采取就近原则
2.样式不冲突不会折叠
例：

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>  
<style>      
div{          
        background-color: darkorchid;      
        }   
div{          
        background-color: deepskyblue;     
         }
</style>
</head>
<body>   
 <div>盒子</div>
 </body>
 </html>

在这里插入图片描述

二、CSS继承性

子标签会继承父级标签某些样式，如文本颜色和字号，想要设置一个可继承的属性，只需要将它应用于父元素即可。
text-,font-,line-这些元素开头的可以继承，以及color属性

三、CSS优先级

定义CSS样式时，经常出现两个或更多规则应用于同一个元素，此时：
1.选择器相同则执行层叠性。
2.选择器不同，出现优先级问题在这里插入图片描述

在这里插入图片描述

柠檬山楂荷叶茶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS第四课------三大特性

CSS第四课------三大特性一、CSS层叠性css层叠性指多种CSS样式的叠加，是浏览器处理冲突的一个能力，如果一个属性通过两个相同的选择器设置在同一个元素上，这时候一个属性就会被另一个属性层叠掉。原则：1.样式冲突采取就近原则2.样式不冲突不会折叠例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"
复制链接

扫一扫

专栏目录