CSSCSS 特性 ① ( CSS 层叠性 | 样式冲突 | 就近原则选择样式 )
Posted 韩曙亮
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSSCSS 特性 ① ( CSS 层叠性 | 样式冲突 | 就近原则选择样式 )相关的知识，希望对你有一定的参考价值。
文章目录
一、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、样式层叠不冲突
上面的示例中 , 对于 div 标签 , 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>
以上是关于CSSCSS 特性 ① ( CSS 层叠性 | 样式冲突 | 就近原则选择样式 )的主要内容，如果未能解决你的问题，请参考以下文章