【CSS】CSS 特性 ④ ( CSS 优先级 | 继承权重 )

韩曙亮

发布于 2023-03-30 19:43:03

3300

发布于 2023-03-30 19:43:03

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

文章目录

一、继承权重

一、继承权重

在下面的基础选择器权重中 , 继承父标签样式的权重为 0,0,0,0 ;

CSS 选择器	选择器优先级 - 权重计算
继承父标签的样式 , * 通配符选择器	0,0,0,0
标签选择器	0,0,0,1
类选择器，链接伪类选择器	0,0,1,0
ID 选择器	0,1,0,0
标签的行内样式 style 属性	1,0,0,0
样式后添加 !important	权重无穷大

1、继承权重示例

在下面的结构中 ,

	<div>
		<p>CSS 继承权重测试</p>
	</div>

设置该 div 标签的颜色为红色 , p 标签会继承 div 标签的样式 , 标签中的文本会变为红色 ;

	<style>
		div {
			color: red;
		}
	</style>

完整代码 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>继承权重</title>
	<base target="_blank"/>
	<style>
		div {
			color: red;
		}
	</style>
</head>
<body>
	<div>
		<p>CSS 继承权重测试</p>
	</div>
</body>
</html>

展示效果 :

2、继承权重+标签选择器权重示例

在下面的结构中 ,

	<div>
		<p>CSS 继承权重测试</p>
	</div>

设置该 div 标签的颜色为红色 , p 标签会继承 div 标签的样式 , 标签中的文本会变为红色 ;

由于是继承标签样式 , 该样式作用于 p 标签的权重为 0,0,0,0 ;

与此同时设置 p 标签为蓝色 ; 该样式的权重为 0,0,0,1 ;

p 标签选择器的权重 0,0,0,1 , 大于 div 标签继承的样式权重 0,0,0,0 , 最终显示的文本为蓝色 ;

	<style>
		div {
			color: red;
		}
		p {
			color: blue;
		}
	</style>

完整代码 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>继承权重</title>
	<base target="_blank"/>
	<style>
		div {
			color: red;
		}
		p {
			color: blue;
		}
	</style>
</head>
<body>
	<div>
		<p>CSS 继承权重测试</p>
	</div>
</body>
</html>

效果展示 :

3、继承权重+标签选择器权重+类选择器示例

如果在上面的基础上 , 为 div 标签设置 class 属性 , 为该 class 属性设置颜色值紫色 ;

类选择器的权重为 0,0,1,0 ; 这个权重比较高 ;

虽然类选择器权重高 , 但是所有选择器的字标签继承的权重 , 都为 0,0,0,0 ,

因此该选择器样式的设置 , 影响不到类选择器下的已经使用标签选择器设置的 p 标签的属性 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>继承权重</title>
	<base target="_blank"/>
	<style>
		div {
			color: red;
		}
		/* 标签选择器 权重 0,0,0,1 */
		p {
			color: blue;
		}
		/* 类选择器 权重 0,0,1,0 */
		.nav {
			color: purple;
		}
	</style>
</head>
<body>
	<div class="nav">
		<p>CSS 继承权重测试</p>
	</div>
</body>
</html>

展示效果 :