【CSS】CSS 特性 ① ( CSS 层叠性 | 样式冲突 | 就近原则选择样式 )

韩曙亮

发布于 2023-03-30 19:41:58

2.1K0

发布于 2023-03-30 19:41:58

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

文章目录

一、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>