文章目录
- 一、CSS 层叠性
- 1、样式层叠冲突
- 2、样式层叠不冲突
一、CSS 层叠性
1、样式层叠冲突
CSS 层叠性 :
为 标签 设置 多种 CSS 样式 , 会出现 CSS 样式叠加的情况 ,
如果有 两个相同类型 的 CSS 样式 作用在了 同一个 标签 上 , 那么就出现了 样式冲突 ,
样式冲突 后 , 根据 " 就近原则 " , 选择 最近设置 的样式 , 也就是 后设置的样式 覆盖 先设置的样式 ;
案例分析 :
下面的代码中 , 为 div 标签 同时设置了 两个 样式
下面 两个 div 标签选择器 都可以为 div 标签设置样式
并且两个样式都是设置文本颜色的
此处根据 " 就近原则 " , 选择后定义的样式 , 文本颜色为蓝色 ;
div {
color: red;
}
div {
color: blue;
}
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS 层叠性</title>
<base target="_blank"/>
<style>
div {
color: red;
}
div {
color: blue;
}
</style>
</head>
<body>
<body>
<div>
CSS 层叠性
</div>
</body>
</html>
展示效果 :
2、样式层叠不冲突
上面的示例中 ,color 样式出现了冲突 ,
第一个设置的 color 样式红色 , 被第二个设置的 color 样式蓝色覆盖 ,
如果第一个样式中设置了 字体大小 , 第二个样式没有 , 则 第一个样式中的 字体大小 设置 仍然生效 ;
代码示例 : 最终 div 盒子中的文本 , 使用了 第一个样式中的 font-size: 30px; 和 第二个样式中的 color: blue; ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS 层叠性</title>
<base target="_blank"/>
<style>
div {
color: red;
font-size: 30px;
}
div {
color: blue;
}
</style>
</head>
<body>
<body>
<div>
CSS 层叠性
</div>
</body>
</html>
